html5----综合属性图表

最新推荐文章于 2025-08-09 20:51:19 发布

weixin_30719711

最新推荐文章于 2025-08-09 20:51:19 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ahl5esoft/archive/2011/07/15/2107524.html

本文介绍了一种使用HTML5 Canvas API绘制角色属性图的方法。通过JavaScript编程实现了包含多个属性值的圆形图表，并展示了如何设置坐标轴、绘制线条及填充颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实际代码如下:



<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>

转载于:https://www.cnblogs.com/ahl5esoft/archive/2011/07/15/2107524.html