使用 Canvas 繪製一個遊戲人物屬性圖

前言

身爲一個程序員居然沉迷遊戲，wtf？？？ 都怪騰訊前幾天出了一款叫作尋仙的手遊，做爲曾經的資深玩家，小V君猶豫再三仍是忍不住入坑了。入坑了怎麼不去打遊戲，還在這裏發文章？ 不不不，小V君今天在這裏可不是要跟你們討論遊戲，做爲一個好好學習，每天向上的有位少年，遊戲嘛，只是業餘的，碼代碼纔是王道！！！因此小V君今天給你們分享一下怎麼使用Canvas來繪製一個遊戲登陸界面的人物屬性圖！

先上一波圖片，怎麼樣？ 人物是否是很帥，很中國風？？？小V君當年但是花了四年時間來玩這我的物哦。。。

一. 什麼是Canvas？

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來實現動態的廣告效果再合適不過。

?更多Canvas內容，點這裏～

?源碼地址：Github✨✨求你的小星星～