本文介紹了六邊形戰(zhàn)斗力屬性圖繪制，涉及知識點canvas
由于正多邊形是十分規(guī)則的，所以感覺很輕易就可以用h5 canvas來實現(xiàn)，首先在里畫一個canvas，id="polygon"。
<canvas id ="polygon"><canvas>
等待頁面加載完畢后開始繪制。函數(shù)polygon傳入幾個參數(shù)：canvas對象，多邊形邊數(shù)，顏色漸變層數(shù)，各項能力值（數(shù)組），各項能力的名稱（數(shù)組），調(diào)用polygon就能繪制出想要的能力屬性圖啦。
(function(){
varhex=document.getElementById("polygon");
varability_value=[];
varability_name=[];
//設(shè)置能力值
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;
//設(shè)置能力屬性名
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(varj=part;j>=1;j--){
ability.beginPath();
for(vari=0;i<=side;i++){
ability.lineTo(Math.cos(i*theta)*space*j+xCenter,-Math.sin(i*theta)*space*j+yCenter)
}
varr=73,g=101,b=115;
ability.fillStyle="rgba("+73+","+101+","+115+","+0.4+")";
ability.fill();
ability.closePath();
}
//繪制能力多邊形
ability.beginPath();
for(vari=0;i<=side;i++){
varx=Math.cos(i*theta)*radius*ability_value[i%side]+xCenter;
vary= -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
ability.fillStyle="rgba(0,0,0,1)";
ability.font="normal 15px Arial";
if(Math.cos(i*theta)*radius>0) {
varx=Math.cos(i*theta)*radius+3+xCenter;
vary= -Math.sin(i*theta)*radius*1.3+yCenter;
}else{
varx=Math.cos(i*theta)*radius*1.5+xCenter;
vary= -Math.sin(i*theta)*radius*1.3+yCenter;
}
ability.fillText(ability_name[i],x,y);
}
參考文獻：http://www.codes51.com/article/detail_167821.html
