使用 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✨✨求你的小星星～