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

2024-08-26 00:20:23

字体：大中小

来源：转载

供稿：网友

蜘蛛图的画法:

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

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

效果图如下所示:

canvas画多边形,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>

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

注：相关教程知识阅读请移步到HTML教程频道。

上一篇：详解HTML5 canvas绘图基本使用方法

下一篇：HTML5 Canvas实现360度全景图的示例代码