您的位置：首页 > Web前端 > HTML5

绘制六芒星战斗力属性图 —— h5 canvas 初体验

2015-09-01 08:50 1096 查看

在黄金的沙滩上

安息着远古的悲剧

在深绿的波涌中

停着灵魂的船

——《眼睛》，顾城

最近用MUI做Web app时想实现一个六芒星战斗力图的（类似LPL赛前战队实力分析图）效果，由于正多边形是十分规则的，所以感觉很轻易就可以用h5 canvas来实现，首先在

<body>

里画一个canvas，

id="polygon"

。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
<canvas id="polygon">不支持canvas</canvas>
</body>

等待页面加载完毕后开始绘制。函数polygon传入几个参数：canvas对象，多边形边数，颜色渐变层数，各项能力值（数组），各项能力的名称（数组），调用polygon就能绘制出想要的能力属性图啦。

<script type="text/javascript" charset="utf-8">
mui.ready(function(){
var hex = document.getElementById("polygon");
var ability_value = new Object;
var ability_name = new Object;
//设置能力值
ability_value[0] = 0.8;
ability_value[1] = 0.5;
ability_value[2] = 0.7;
ability_value[3] = 0.6;
ability_value[4] = 0.5;
ability_value[5] = 0.7;
//设置能力属性名
ability_name[0] = '物理';
ability_name[1] = '魔法';
ability_name[2] = '韧性';
ability_name[3] = '敏捷';
ability_name[4] = '防御';
ability_name[5] = '智力';
polygon(hex, 6, 6, ability_value, ability_name);
});

//绘制多边形能力图
function polygon(obj, side, part, ability_value, ability_name) {
var ability = obj.getContext('2d');
ability.canvas.width = window.innerWidth*0.7;
ability.canvas.height = window.innerWidth*0.7;
var width = obj.width;
var height = obj.height;
var xCenter = width * 0.5;
var yCenter = height * 0.5;
var radius = width * 0.3;
var space = radius/part;
var theta = Math.PI*2/side;

//绘制渐变多边形底层
for (var j=part;j>=1;j--) {
ability.beginPath();
for (var i=0; i<=side; i++) {
ability.lineTo(Math.cos(i*theta)*space*j+xCenter,-Math.sin(i*theta)*space*j+yCenter);
}
var r=73, g=101,b=115;
ability.fillStyle = "rgba("+73+","+101+","+115+"," + 0.4 + ")";
ability.fill();
ability.closePath();
}

//绘制能力多边形
ability.beginPath();
for (var i=0; i<=side; i++) {
var x = Math.cos(i*theta)*radius*ability_value[i%side]+xCenter;
var y = -Math.sin(i*theta)*radius*ability_value[i%side]+yCenter;
ability.lineTo(x,y);
}
ability.strokeStyle="rgba(255,255,96,1)";
ability.lineWidth = 4;
ability.stroke();
ability.closePath();

//绘制字体
for (var i=0; i<side; i++) {
ability.fillStyle="rgba(0,0,0,1)";
ability.font = "normal 15px Microsoft Yahei";
if (Math.cos(i*theta)*radius>0) {
var x = Math.cos(i*theta)*radius+3+xCenter;
var y = -Math.sin(i*theta)*radius*1.3+yCenter;
} else {
var x = Math.cos(i*theta)*radius*1.5+xCenter;
var y = -Math.sin(i*theta)*radius*1.3+yCenter;
}
ability.fillText(ability_name[i],x,y);
}
}
</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： canvas html5 战斗力属性图

相关文章推荐

新的分享

章节导航