实际代码如下:
<html>
<head>
<title>html5 人物属性图</title></head>
<body>
<canvas id="my" width="400" height="400"></canvas>
<script language="javascript" type="text/javascript">
var a = new $attr({
name : '路飞',
values : [5,6,7,8,10],
keys : ['力量','防御','命中','闪避','反击'],
size : 10
});
a.draw();
function $attr(p){
var ctx = document.getElementById('my').getContext('2d'), _p = {
name : '春哥',
values : [10,10,10,10,10,10,10],
keys : ['力量','防御','闪避','反击','必杀','命中','格挡'],
size : 10,
r : 10
}
ctx.clearRect(0,0,400,400);
ctx.translate(200,200);
ctx.save();
this.draw = function(){
init();
drawCircle();
drawLine();
};
//等级圆
function drawCircle(){
ctx.beginPath();
ctx.strokeStyle = '#c0c0c0';
for(var i = p.size; i > 0; i--){
ctx.moveTo(p.r * i, 0);
ctx.fillText(i,p.r * i, 0);
ctx.arc(0,0,p.r * i,0,Math.PI*2,true);
}
ctx.stroke();
};
//属性线
function drawLine(){
var l = p.keys.length, rad = Math.PI * 2 / p.keys.length;
ctx.rotate(Math.PI / 2 * 3);
ctx.beginPath();
ctx.font = 'bold 20px 宋体';
for(var i = l; i > 0; i--){
ctx.rotate(rad);
ctx.moveTo(0,0);
ctx.lineTo(p.r * p.size,0);
}
ctx.stroke();
drawRange(l,rad);
drawKeys(l,rad);
};
//画区域
function drawRange(l,rad){
var x1 = p.values[0] * p.r;
ctx.beginPath();
ctx.fillStyle = 'rgba(2,140,253,0.5)';
ctx.strokeStyle = 'black';
ctx.moveTo(x1,0);
for(var i = l - 1; i >= 1; i--){
ctx.rotate(rad);
ctx.lineTo(p.values[i] * p.r,0);
}
ctx.rotate(rad);
ctx.lineTo(x1,0);
ctx.stroke();
ctx.fill();
};
//属性名
function drawKeys(l,rad){
ctx.fillStyle = 'gray';
ctx.font = 'bold 10px 宋体';
ctx.translate(-6,-15);
ctx.beginPath();
for(var i = l; i > 0; i--){
ctx.rotate(rad);
ctx.save();
ctx.translate(p.r * p.size + 15,5);
ctx.rotate(rad * i + Math.PI / 2 - rad);
ctx.fillText(p.keys[i - 1],0,0);
ctx.restore();
}
ctx.stroke();
};
//初始化数据
function init(){
for(var a in _p){
p[a] || (p[a] = _p[a]);
}
};
};
</script>
</body>
</html>
