详解canvas多边形(蜘蛛图)的画法示例

蜘蛛图的画法:

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

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

效果图如下所示:

1. 初始化js代码

  //初始化  (function(){
        VAR canvas = document.createElement('canvas');
        document.body.apPEndChild(canvas);
        canvas.height = mH;
        canvas.width = mW;
        mCtx = canvas.getContext('2d');
        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 = [['法力', 77],['防御', 72],['生命值', 46],['物理伤害', 50],['回复值', 80],['耐力', 60]];
      var mCount = mData.length;
     //边数  var mcenter = mW /2;
     //中心点  var mRadius = mCenter - 100;
     //半径(减去的值用于给绘制的文本留空间)  var mAngle = Math.PI * 2 / mCount;
     //角度  var mCtx = null;
      var mColorPolygon = '#B8B8B8';
     //多边形颜色  var mColorLines = '#B8B8B8';
     //顶点连线颜色  var mColorText = '#000000';
  //初始化  (function(){
        var canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        canvas.height = mH;
        canvas.width = mW;
        mCtx = canvas.getContext('2d');
        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('x:' + x, 'y:' + 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 + '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();
  }
  //绘制数据区域  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 = 'rgba(255, 0, 0, 0.5)';
        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 = 'rgba(255, 0, 0, 0.8)';
          ctx.fill();
    }
        ctx.restore();
  }
    /script>
    /body>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！