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

作者: 阴隐淫音
来源: 51数据库
2021-09-03

蜘蛛图的画法:

在开始之前,我们需要知道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>

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