摘要：中需要用到的數學公式很多網上都有，不需要自己手寫，只要增加點印象，一個復制就可以拉過來用了，啦啦啦，小君也很會偷懶的，哈哈哈繪制直線同理，定義一個名為的函數來實現這部分功能。

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

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

canvas 元素用于在網頁上繪制圖形。HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制2D圖像。 在矩形區域的畫布上，控制其每一像素，JavaScript 來繪制 2D圖形，逐像素進行渲染。可以通過多種方法使用canvas 元素繪制路徑、矩形、圓形、字符以及添加圖像。

注意！！！

canvas 標簽本身是不具備繪圖功能，只能使用 JavaScript 在網頁上繪制圖像哦。

為了簡潔明了，小V君沒有在頁面上花什么時間，希望大家不要介意，畢竟JS才是今天的主角哦。
首先，我們來簡單分析一下。這個人物的屬性圖是由六個內嵌的正六邊形組成的，再由六根線從連接這個正六邊形的中心，最后根據人物的屬性進行顏色的填充。怎么樣？是不是很簡單，只要三步就可以繪制出這個游戲人物屬性圖哦。可能大家會覺得小V君說起來容易，實際又該怎么操作呢？各位看官大爺別著急，小的這就送上代碼。

var mW = 400,
    mH = 400,
    mCtx = null,
    mCount = 6,
    mCenter = mW/2,
    mRadius = mCenter - 50,
    mAngle = Math.PI*2/mCount,
    mColorPolygon = "#000000",
    mData = [
      ["爆發", 100],
      ["防御", 60],
      ["治療", 50],
      ["控制", 60],
      ["輔助", 30],
      ["機動", 70]
    ],
    mColorText = "#000000",
    canvas = document.createElement("canvas");
    document.body.appendChild(canvas);
    canvas.width = mW;
    canvas.height = mH;
    mCtx = canvas.getContext("2d");

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

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

function drawPolygon(ctx) {
    ctx.save();   // save the default state
    ctx.strokeStyle = mColorPolygon;
    var r = mRadius / mCount;
    for(var i = 0; i < mCount; i++) {
        ctx.beginPath();   //開始路徑
        var currR = r * (i + 1);
        for(var j = 0; j < mCount; j++) {
            var x = mCenter + currR*Math.cos(mAngle*j);
            var y = mCenter + currR*Math.sin(mAngle*j);
            ctx.lineTo(x, y);  
        }
        ctx.closePath();  //閉合路徑
        ctx.stroke()  // restore to the default state
    }
    ctx.restore();
}

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

function drawLines(ctx) {
  ctx.save();
  ctx.beginPath();
  ctx.strokeStyle = mColorPolygon;
  for( var i = 0; i< mCount; i++){
    var x = mCenter + mRadius * Math.cos(mAngle*i);
    var y = mCenter + mRadius * Math.sin(mAngle*i);
    ctx.moveTo(mCenter, mCenter);
    ctx.lineTo(x, y);
  }
  ctx.stroke();
  ctx.restore();
}

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

function drawRegion(ctx) {
  ctx.save();
  ctx.beginPath();
  for(var i = 0; i< mCount; i++){
    var x = mCenter + mRadius*Math.cos(mAngle*i)*mData[i][5]/100;
    var y = 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();
}

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

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

function drawText(ctx) {
  ctx.save();
  var fontSize = mCenter/12;
  ctx.font = fontSize + "px Microsoft Yahei";
  ctx.fillStyle = mColorText;
  for(var i = 0; i< mCount; i++){
    var x = mCenter + mRadius*Math.cos(mAngle*i);
    var y = mCenter + mRadius*Math.sin(mAngle*i);
    //通過不同的位置，調整文本的顯示位置
    if( mAngle * i >= 0 && mAngle * i <= Math.PI / 2 ){
            ctx.fillText(mData[i][0], x, y + fontSize);
        }else if(mAngle * i > Math.PI / 2 && mAngle * i <= Math.PI){
            ctx.fillText(mData[i][0], x - ctx.measureText(mData[i][0]).width, y + fontSize);
        }else if(mAngle * i > Math.PI && mAngle * 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語句就是通過不同的位置來調整文本的顯示位置。

綜上所述，簡單說明了如何使用Canvas來繪制一個人物屬性圖，以上內容屬個人理解和網上學習總結，如有錯誤，歡迎指正共勉。關于Canvas這個元素，它應用的領域可是非常的廣闊哦。比如在游戲方面，canvas在基于Web的圖像顯示方面比Flash更加立體、更加精巧，canvas游戲在流暢度和跨平臺方面更牛。在可視化數據方面，百度的echart、d3.js、three.js等等用運用到了canvas。如果你以為Canvas的運用只有這些，那就打錯特錯了，在現在以及未來的智能機時代，HTML5技術能夠在banner廣告上發揮巨大作用，而使用Canvas來實現動態的廣告效果再合適不過。