canvas多边形的画法示例

百变鹏仔 3个月前 (10-18) #H5教程

文章标签多边形

本文主要介绍了canvas多边形(蜘蛛图)的画法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

蜘蛛图的画法:

在开始之前,我们需要知道canvas是如何进行图像的绘制,canvas 元素用于在网页上绘制图形。HTML5 的 canvas 元素使用 JavaScript 在网页上绘制2D图像。在矩形区域的画布上，控制其每一像素，JavaScript 来绘制 2D图形，逐像素进行渲染。可以通过多种方法使用canvas 元素绘制路径、矩形、圆形、字符以及添加图像。

* 注意！！！canvas 标签本身是不具备绘图功能，只能使用 JavaScript 在网页上绘制图像。

效果图如下所示:

1. 初始化js代码

  //初始化  (function(){    var canvas = document.createElement(&#39;canvas&#39;);    document.body.appendChild(canvas);    canvas.height = mH;    canvas.width = mW;    mCtx = canvas.getContext(&#39;2d&#39;);    drawPolygon(mCtx); // 绘制多边形边    drawLines(mCtx); //顶点连线    drawText(mCtx); // 绘制文本    drawRegion(mCtx);  // 绘制数据    drawCircle(mCtx);  // 画数据圆点  })();

上面代码中,通过一个立即执行函数,进行对所有的设置进行初始化,对于canvas正六边形的画法,可参见canvas画正六边形

在蜘蛛图中,我们可以进行拆分一下,通过画六边形,直线,圆圈的方式,分别进行完整个体的组件,然后通过方法进行统一调用绘制

如下面所示源代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>蜘蛛图canvas</title>    <style type="text/css">        canvas{        }    </style></head><body><script type="text/javascript">  var mW = 400;  var mH = 400;  var mData = [[&#39;法力&#39;, 77],[&#39;防御&#39;, 72],[&#39;生命值&#39;, 46],[&#39;物理伤害&#39;, 50],[&#39;回复值&#39;, 80],[&#39;耐力&#39;, 60]];  var mCount = mData.length; //边数  var mCenter = mW /2; //中心点  var mRadius = mCenter - 100; //半径(减去的值用于给绘制的文本留空间)  var mAngle = Math.PI * 2 / mCount; //角度  var mCtx = null;  var mColorPolygon = &#39;#B8B8B8&#39;; //多边形颜色  var mColorLines = &#39;#B8B8B8&#39;; //顶点连线颜色  var mColorText = &#39;#000000&#39;;  //初始化  (function(){    var canvas = document.createElement(&#39;canvas&#39;);    document.body.appendChild(canvas);    canvas.height = mH;    canvas.width = mW;    mCtx = canvas.getContext(&#39;2d&#39;);    drawPolygon(mCtx);    drawLines(mCtx);    drawText(mCtx);    drawRegion(mCtx);    drawCircle(mCtx);  })();  // 绘制多边形边  function drawPolygon(ctx){    ctx.save(); // save the default state    ctx.strokeStyle = mColorPolygon;    var r = mRadius/ mCount; //单位半径    //画6个圈    for(var i = 0; i < mCount; i ++){      ctx.beginPath(); //开始路径      var currR = r * ( i + 1); //当前半径      //画6条边      for(var j = 0; j < mCount; j ++) {        var x = mCenter + currR * Math.cos(mAngle * j);        var y = mCenter + currR * Math.sin(mAngle * j);        console.log(&#39;x:&#39; + x, &#39;y:&#39; + y);        ctx.lineTo(x, y);      }      ctx.closePath();  //闭合路径      ctx.stroke();    }    ctx.restore(); // restore to the default state  }  //顶点连线  function drawLines(ctx){    ctx.save();    ctx.beginPath();    ctx.strokeStyle = mColorLines;    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();  }  //绘制文本  function drawText(ctx){    ctx.save();    var fontSize = mCenter / 12;    ctx.font = fontSize + &#39;px Microsoft Yahei&#39;;    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();  }  //绘制数据区域  function drawRegion(ctx){    ctx.save();    ctx.beginPath();    for(var i = 0; i < mCount; i ++){      var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;      var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;      ctx.lineTo(x, y);    }    ctx.closePath();    ctx.fillStyle = &#39;rgba(255, 0, 0, 0.5)&#39;;    ctx.fill();    ctx.restore();  }  //画点  function drawCircle(ctx){    ctx.save();    var r = mCenter / 18;    for(var i = 0; i < mCount; i ++){      var x = mCenter + mRadius * Math.cos(mAngle * i) * mData[i][1] / 100;      var y = mCenter + mRadius * Math.sin(mAngle * i) * mData[i][1] / 100;      ctx.beginPath();      ctx.arc(x, y, r, 0, Math.PI * 2);      ctx.fillStyle = &#39;rgba(255, 0, 0, 0.8)&#39;;      ctx.fill();    }    ctx.restore();  }</script></body></html>

文章推荐

canvas多边形的画法示例

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集