canvas多边形的画法示例有哪些?

canvas多边形的画法示例有哪些?

蜘蛛图的画法:

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

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