全国服务热线:4008-888-888

技术知识

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

蜘蛛图的画法:

在刚开始以前,大家必须了解canvas是怎样开展图象的绘图,canvas 元素用于在网页页面上绘图图型。HTML5 的 canvas 元素应用 JavaScript 在网页页面上绘图2D图象。 在矩形框地区的画布上,操纵其每像素,JavaScript 来绘图 2D图型,逐像素开展3D渲染。能够根据多种多样方式应用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);  // 画数据信息圆点
  })();

上面编码中,根据1个马上实行涵数,开展对全部的设定开展原始化,针对canvas正6边形的画法,可参照canvas画正6边形

在蜘蛛图中,大家能够开展拆分1下,根据画6边形,平行线,圆圈的方法,各自开展详细个人的组件,随后根据方式开展统1启用绘图

以下面所示源码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <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>

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服