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


Posted in HTML / CSS onJanuary 29, 2018

蜘蛛图的画法:

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

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

HTML / CSS 相关文章推荐
css3 transform属性详解
Sep 30 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
详解CSS3中nth-child与nth-of-type的区别
Jan 05 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5的新特性(1)
Mar 03 HTML / CSS
data:image data url 文件转为Blob上传后端的方法
Jul 16 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
不要在HTML中滥用div
May 08 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
Jan 29 #HTML / CSS
HTML5仿微信聊天界面、微信朋友圈实例代码
Jan 29 #HTML / CSS
详解HTML5 data-* 自定义属性
Jan 24 #HTML / CSS
详解html5 shiv.js和respond.min.js
Jan 24 #HTML / CSS
浅析HTML5:'data-'属性的作用
Jan 23 #HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 #HTML / CSS
浅谈html5 video 移动端填坑记
Jan 15 #HTML / CSS
You might like
php zend解密软件绿色版测试可用
2008/04/14 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
基于jQuery的倒计时插件代码
2011/05/07 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
Chrome下ifame父窗口调用子窗口的问题示例探讨
2014/03/17 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
Javascript基础教程之数组 array
2015/01/18 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
angularjs学习笔记之简单介绍
2015/09/26 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
微信小程序实现带刻度尺滑块功能
2017/03/29 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
vue + webpack如何绕过QQ音乐接口对host的验证详解
2018/07/01 Javascript
javascript实现图片轮播代码
2019/07/09 Javascript
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
关于Python3 类方法、静态方法新解
2019/08/30 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
python解析多层json操作示例
2019/12/30 Python
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
女大学生个人求职信
2013/12/09 职场文书
计算机个人求职信范例
2014/01/24 职场文书
绿色出行口号
2014/06/18 职场文书
学用政策心得体会
2014/09/10 职场文书
大学生求职信怎么写
2015/03/19 职场文书
2016年母亲节广告语
2016/01/28 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
500字作文之周记
2019/12/13 职场文书