第使用Canvas繪制一個游戲人物屬性圖身為一個程序員竟然沉迷游戲，wtf？？？都怪騰訊前幾天出了一款叫做尋仙的手游，作為曾經(jīng)的資深玩家，小V君猶豫再三還是忍不住入坑了。入坑了怎么不去打游戲，還在這里發(fā)文章？不不不，小V君今天在這里可不是要跟大家討論游戲，作為一個好好學(xué)習(xí)，天天向上的有位少年，游戲嘛，只是業(yè)余的，碼代碼才是王道?。。∷孕君今天給大家分享一下怎么使用Canvas來繪制一個游戲登錄界面的人物屬性圖！

先上一波圖片，怎么樣？人物是不是很帥，很中國風(fēng)？？？小V君當(dāng)年可是花了四年時間來玩這個人物哦。。。

一.什么是Canvas？

canvas元素用于在網(wǎng)頁上繪制圖形。HTML5的canvas元素使用JavaScript在網(wǎng)頁上繪制2D圖像。在矩形區(qū)域的畫布上，控制其每一像素，JavaScript來繪制2D圖形，逐像素進(jìn)行渲染?？梢酝ㄟ^多種方法使用canvas元素繪制路徑、矩形、圓形、字符以及添加圖像。

注意?。?！

canvas標(biāo)簽本身是不具備繪圖功能，只能使用JavaScript在網(wǎng)頁上繪制圖像哦。

二.任務(wù)分析

為了簡潔明了，小V君沒有在頁面上花什么時間，希望大家不要介意，畢竟JS才是今天的主角哦。

首先，我們來簡單分析一下。這個人物的屬性圖是由六個內(nèi)嵌的正六邊形組成的，再由六根線從連接這個正六邊形的中心，最后根據(jù)人物的屬性進(jìn)行顏色的填充。怎么樣？是不是很簡單，只要三步就可以繪制出這個游戲人物屬性圖哦?？赡艽蠹視X得小V君說起來容易，實際又該怎么操作呢？各位看官大爺別著急，小的這就送上代碼。

三.代碼部分

varmW=400,

mH=400,

mCtx=null,

mCount=6,

mCenter=mW/2,

mRadius=mCenter-50,

mAngle=Math.PI*2/mCount,

mColorPolygon='#000000',

mData=[

['爆發(fā)',100],

['防御',60],

['治療',50],

['控制',60],

['輔助',30],

['機(jī)動',70]

mColorText='#000000',

canvas=document.createElement('canvas');

document.body.appendChild(canvas);

canvas.width=mW;

canvas.height=mH;

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

首先，我們需要指定一個id屬性(腳本中經(jīng)常引用),再使用width和height屬性定義的畫布的大小.在這里我將畫布的寬和高都設(shè)置為400，六邊形嘛，數(shù)量當(dāng)然是6，圖形的中心等于它自身寬度的一半，線條的顏色就使用黑色，在利用一個數(shù)組寫上自定義的數(shù)據(jù)就可以開始繪畫啦。

細(xì)心的朋友可能會問mRadius為什么等于mCenter減50呢？在這里，請允許小V君賣個關(guān)子，大家看完就自然知道結(jié)果啦~~~

繪制六個內(nèi)嵌的六邊形

functiondrawPolygon(ctx){

ctx.save();//savethedefaultstate

ctx.strokeStyle=mColorPolygon;

varr=mRadius/mCount;

for(vari=0;imCount;i++){

ctx.beginPath();//開始路徑

varcurrR=r*(i+1);

for(varj=0;jmCount;j++){

varx=mCenter+currR*Math.cos(mAngle*j);

vary=mCenter+currR*Math.sin(mAngle*j);

ctx.lineTo(x,y);

ctx.closePath();//閉合路徑

ctx.stroke()//restoretothedefaultstate

ctx.restore();

}

為了代碼整體的美觀和復(fù)用性，我們定一個名為drawPolygon的函數(shù)，再使用一個for循環(huán)來完成六邊形的繪制。看到這里，大家可能會問怎么還使用了sin和cos函數(shù)了，想當(dāng)年學(xué)數(shù)學(xué)那可是一個受罪，怎么現(xiàn)在還要受它的折磨。。。小V君也深表無奈，代碼跟數(shù)學(xué)本來就是一家，代碼里面很多地方都要運用Math函數(shù)，所以在數(shù)學(xué)這個坑上小V君與大家同在(┬＿┬)。（ps：js中需要用到的數(shù)學(xué)公式很多網(wǎng)上都有，不需要自己手寫，只要增加點印象，一個復(fù)制就可以拉過來用了，啦啦啦，小V君也很會偷懶的，哈哈哈~~~）

繪制直線

functiondrawLines(ctx){

ctx.save();

ctx.beginPath();

ctx.strokeStyle=mColorPolygon;

for(vari=0;imCount;i++){

varx=mCenter+mRadius*Math.cos(mAngle*i);

vary=mCenter+mRadius*Math.sin(mAngle*i);

ctx.moveTo(mCenter,mCenter);

ctx.lineTo(x,y);

ctx.stroke();

ctx.restore();

}

同理，定義一個名為drawLines的函數(shù)來實現(xiàn)這部分功能。Canvas畫線相對來說比較簡單，比較難理解的估計還是在這個for循環(huán)的函數(shù)里面，對于六邊形的繪制大家可以參考一下這篇博文如何繪制六邊形

繪制覆蓋區(qū)域

functiondrawRegion(ctx){

ctx.save();

ctx.beginPath();

for(vari=0;imCount;i++){

varx=mCenter+mRadius*Math.cos(mAngle*i)*mData[i][5]/100;

vary=mCenter+mRadius*Math.sin(mAngle*i)*mData[i][6]/100;

ctx.lineTo(x,y);

ctx.closePath();

ctx.fillStyle='rgba(255,0,0,.5)';

ctx.fill();

ctx.store();

}

寫到這里，我們的屬性圖差不多就繪制完成了。但是，圖形內(nèi)的顏色具體是怎么進(jìn)行填充的呢？在這里我們使用了fill語法進(jìn)行填充，在代碼中只需要使用ctx.fill()就可以實現(xiàn)了。

解釋：填充，是將閉合的路徑的內(nèi)容填充具體的顏色,在這里我設(shè)置了透明度為0.5的紅色，默認(rèn)顏色黑色。如果所有的描點沒有構(gòu)成封閉結(jié)構(gòu)，也會自動構(gòu)成一個封閉圖形。

繪制文本

functiondrawText(ctx){

ctx.save();

varfontSize=mCenter/12;

ctx.font=fontSize+'pxMicrosoftYahei';

ctx.fillStyle=mColorText;

for(vari=0;imCount;i++){

varx=mCenter+mRadius*Math.cos(mAngle*i);

vary=mCenter+mRadius*Math.sin(mAngle*i);

//通過不同的位置，調(diào)整文本的顯示位置

if(mAngle*i=0mAngle*i=Math.PI/2){

ctx.fillText(mData[i][0],x,y+fontSize);

}elseif(mAngle*iMath.PI/2mAngle*i=Math.PI){

ctx.fillText(mData[i][0],x-ctx.measureText(mData[i][0]).width,y+fontSize);

}elseif(mAngle*iMath.PImAngle*i=Math.PI*3/2){

ctx.fillText(mData[i][0],x-ctx.measureText(mData[i][0]).width,y);

}else{

ctx.fillText(mData[i][0],x,y);

ctx.restore();

}

至此，我們的人物屬性圖就繪制好了。不知道各位看完之后有沒有想明白前面小V君埋下的問題呢？50px，對的，mRadius等于mCenter減50中的那50px就是給我們的文本留出來的位置，代碼中的if語句就是通過不同的位置來調(diào)整文本的顯示位置。

四.小結(jié)

綜上所述，簡單說明了如何使用Canvas來繪制一個人物屬性圖，以上內(nèi)容屬個人理解和網(wǎng)上學(xué)習(xí)總結(jié)，如有錯誤，歡迎指正共勉。關(guān)于Canvas這個元素，它應(yīng)用的