html
<div class="title">墨言战力图</div>
<canvas id="myCanvas" width="400" height="400" style="border:0px solid #c3c3c3;">js
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mCount = 6; //边数
var mCenter = 400 / 2;
var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)
var mAngle = Math.PI * 2 / mCount;
var mColorPolygon = '#B8B8B8'; //多边形颜色
drawPolygon(ctx);
function drawPolygon(ctx) {
ctx.save();
ctx.strokeStyle = mColorPolygon;
var r = mRadius / mCount;
//画6个圈
for(var i = 0; i < mCount; i++) {
ctx.beginPath();
var currR = r * (i + 1); //当前半径
//画6条边
for(var j = 0; j < mCount; j++) {
var x = mCenter + currR * Math.cos(mAngle * j);
var y = mCenter + currR * Math.sin(mAngle * j);
ctx.lineTo(x, y);
}
ctx.closePath()
ctx.stroke();
}
ctx.restore();
}
var mColorLines = '#B8B8B8'; //顶点连线颜色
drawLines(ctx);
//顶点连线
function drawLines(ctx) {
ctx.save();
ctx.beginPath();
ctx.strokeStyle = mColorLines;
for(var i = 0; i < mCount; i++) {
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
ctx.moveTo(mCenter, mCenter);
ctx.lineTo(x, y);
}
ctx.stroke();
ctx.restore();
}
var mmColorLines = '#B9999';
drawNeiLines(ctx);
//画点
function drawNeiLines(ctx) {
ctx.save();
ctx.beginPath();
ctx.strokeStyle = mmColorLines;
for(var i = 0; i < mCount; i++) {
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
if(mAngle * i >= 0 && mAngle * i <= Math.PI / 4) {
ctx.beginPath(); // 开启绘制路径
ctx.arc(x - 24, y, 5, 0, 2 * Math.PI); // 绘制圆 参数依次为 圆的横坐标/纵坐标/半径/绘制圆的起始位置/绘制圆的弧度大小
ctx.fillStyle = "#B9999"; // 设置填充颜色
ctx.fill(); // 填充颜色
ctx.moveTo(326, 200); // 设置线的起始位置
ctx.lineTo(249, 284); // 设置线的结束位置
ctx.strokeStyle = 'blue'; // 设置绘制线条的颜色
ctx.strokeWidth = 1; // 设置绘制线条的宽度
ctx.stroke(); // 绘制
ctx.moveTo(326, 200); // 设置线的起始位置
ctx.lineTo(274, 70); // 设置线的结束位置
ctx.strokeStyle = 'blue'; // 设置绘制线条的颜色
ctx.strokeWidth = 1; // 设置绘制线条的宽度
ctx.stroke(); // 绘制
ctx.moveTo(274, 70); // 设置线的起始位置
ctx.lineTo(163, 138); // 设置线的结束位置
ctx.strokeStyle = 'blue'; // 设置绘制线条的颜色
ctx.strokeWidth = 1; // 设置绘制线条的宽度
ctx.stroke(); // 绘制
ctx.moveTo(163, 138); // 设置线的起始位置
ctx.lineTo(78, 200); // 设置线的结束位置
ctx.strokeStyle = 'blue'; // 设置绘制线条的颜色
ctx.strokeWidth = 1; // 设置绘制线条的宽度
ctx.stroke(); // 绘制
ctx.moveTo(78, 200); // 设置线的起始位置
ctx.lineTo(165, 265); // 设置线的结束位置
ctx.strokeStyle = 'blue'; // 设置绘制线条的颜色
ctx.strokeWidth = 1; // 设置绘制线条的宽度
ctx.stroke(); // 绘制
ctx.moveTo(165, 265); // 设置线的起始位置
ctx.lineTo(249, 284); // 设置线的结束位置
ctx.strokeStyle = 'blue'; // 设置绘制线条的颜色
ctx.strokeWidth = 1; // 设置绘制线条的宽度
ctx.stroke(); // 绘制
ctx.fillStyle = "red"; // 设置填充颜色
ctx.fill(); // 填充颜色
ctx.closePath(); // 关闭绘制路径
// console.log("速度:" + y);
} else if(mAngle * i > Math.PI / 1.5 && mAngle * i <= Math.PI) {
ctx.beginPath(); // 开启绘制路径
ctx.arc(x + 28, y, 5, 0, 2 * Math.PI); // 绘制圆 参数依次为 圆的横坐标/纵坐标/半径/绘制圆的起始位置/绘制圆的弧度大小
ctx.fillStyle = "#B9999"; // 设置填充颜色
ctx.fill(); // 填充颜色
ctx.closePath(); // 关闭绘制路径
// console.log("射门:" + y);
} else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
ctx.beginPath(); // 开启绘制路径
ctx.arc(x + 38, y + 68, 5, 0, 2 * Math.PI); // 绘制圆 参数依次为 圆的横坐标/纵坐标/半径/绘制圆的起始位置/绘制圆的弧度大小
ctx.fillStyle = "#B9999"; // 设置填充颜色
ctx.fill(); // 填充颜色
ctx.closePath(); // 关闭绘制路径
// console.log("传球:"+y);
} else if(mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
ctx.beginPath(); // 开启绘制路径
ctx.arc(x - 26, y - 46, 5, 0, 2 * Math.PI); // 绘制圆 参数依次为 圆的横坐标/纵坐标/半径/绘制圆的起始位置/绘制圆的弧度大小
ctx.fillStyle = "#B9999"; // 设置填充颜色
ctx.fill(); // 填充颜色
ctx.closePath(); // 关闭绘制路径
// console.log("力量:"+(y-46));
} else if(mAngle * i > Math.PI / 1.5) {
ctx.beginPath(); // 开启绘制路径
ctx.arc(x, y, 5, 0, 2 * Math.PI); // 绘制圆 参数依次为 圆的横坐标/纵坐标/半径/绘制圆的起始位置/绘制圆的弧度大小
ctx.fillStyle = "#B9999"; // 设置填充颜色
ctx.fill(); // 填充颜色
ctx.closePath(); // 关闭绘制路径
// console.log("耐力:"+y);
} else {
ctx.beginPath(); // 开启绘制路径
ctx.arc(x + 40, y - 64, 5, 0, 2 * Math.PI); // 绘制圆 参数依次为 圆的横坐标/纵坐标/半径/绘制圆的起始位置/绘制圆的弧度大小
ctx.fillStyle = "#B9999"; // 设置填充颜色
ctx.fill(); // 填充颜色
ctx.closePath(); // 关闭绘制路径
// console.log("防守:"+y);
}
}
ctx.restore();
}
var mData = [
['颜值', 77],
['人缘', 72],
['魅力', 46],
['身材', 50],
['丁丁', 80],
['腿长', 60]
]; //数据
var mColorText = '#000000';
drawText(ctx);
//绘制文本
function drawText(ctx) {
ctx.save();
var fontSize = mCenter / 12;
ctx.font = fontSize + 'px Microsoft Yahei';
ctx.fillStyle = mColorText;
for(var i = 0; i < mCount; i++) {
var x = mCenter + mRadius * Math.cos(mAngle * i);
var y = mCenter + mRadius * Math.sin(mAngle * i);
//通过不同的位置，调整文本的显示位置
if(mAngle * i >= 0 && mAngle * i <= Math.PI / 2) {
ctx.fillText(mData[i][0], x, y + fontSize);
} else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI) {
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
} else if(mAngle * i > Math.PI && mAngle * i <= Math.PI * 3 / 2) {
ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y);
} else {
ctx.fillText(mData[i][0], x, y);
}
}
ctx.restore();
}效果图
