html5 制作雷达,HTML5Canvas制作雷达图实战

HTML5Canvas制作雷达图实战。雷达图又叫蜘蛛网图，是一种对各项数据查看很明显的表现图，在很多游戏中，对游戏中的每个角色的分析图一般也用这种图。

下面，用HTML5的Cavas来实现雷达图。

效果

一、创建Canvas

var mW = 400;

var mH = 400;

var mCtx = null;

var canvas = document.createElement('canvas');

document.body.appendChild(canvas);

canvas.height = mH;

canvas.width = mW;

mCtx = canvas.getContext('2d');

二、制作多边形背景

var mCount = 6; //边数

var mCenter = mW /2; //中心点

var mRadius = mCenter - 50; //半径(减去的值用于给绘制的文本留空间)

var mAngle = Math.PI * 2 / mCount; //角度

var mColorPolygon = '#B8B8B8'; //多边形颜色

// 绘制多边形边

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'; //顶点连线颜色

//顶点连线

function drawLines(ctx){

ctx.save();

ctx.beginPath();

ctx.strokeStyle =