欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-14 17:32:58
这篇文章主要介绍了详解canvas多边形(蜘蛛图)的画法示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 18-01-29...

蜘蛛图的画法:

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

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

效果图如下所示:

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

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>

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