Canvas三种动态画圆实现方法说明(小结)


Posted in Javascript onApril 16, 2021

前言

canvas是HTML5出来的绘图API容器,对于图形的处理非常强大,下面使用canvas配合JavaScript来做一下动态画圆效果。可以用它来做圆形进度条来使用。
这里我个人总结了3种实现方法,大家可以参考一下。

方法一:arc()实现画圆

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas>

  <script type="text/javascript">
  //方法一:arc 动态画圆
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字号大小
  var tmpAngle = startAngle; //临时角度变量

  //渲染函数
  var rander = function(){
    if(tmpAngle >= endAngle){
      return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);

    //画圈
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.arc(r, r, cR, startAngle, tmpAngle);
    ctx.stroke();
    ctx.closePath();

    //写字
    ctx.fillStyle = '#1d89d5';
    ctx.font= fontSize + 'px Microsoft Yahei';
    ctx.textAlign='center';
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);

    requestAnimationFrame(rander);
  };

  rander();
  </script>
</body>
</html>

思路:

通过设置的开始角度和结束角度来做限定,然后通过累加临时的角度变量实现动画效果。

相关函数:

context.arc(x,y,r,sAngle,eAngle,counterclockwise);

Canvas三种动态画圆实现方法说明(小结)

方法二:rotate() 动态画圆

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas>

  <script type="text/javascript">
  //方法二:rotate() 动态画圆
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 1 * (Math.PI / 180); //偏移角度量
  var fontSize = 35; //字号大小
  var tmpAngle = startAngle; //临时角度变量

  //渲染函数
  var rander = function(){
    if(tmpAngle >= endAngle){
      return;
    }else if(tmpAngle + xAngle > endAngle){
      tmpAngle = endAngle;
    }else{
      tmpAngle += xAngle;
    }
    ctx.clearRect(0, 0, mW, mH);

    //画圈
    ctx.save();
    ctx.beginPath();
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = '#1c86d1';
    ctx.translate(r, r); //重定义圆点
    ctx.rotate(-Math.PI); //最上方为起点
    for(var i = 0; i <= tmpAngle - startAngle; i += xAngle){ //绘图
      ctx.moveTo(0, cR - lineWidth);
      ctx.lineTo(0, cR);
      ctx.rotate(xAngle); //通过旋转角度和画点的方式绘制圆
    }
    ctx.stroke();
    ctx.closePath();
    ctx.restore();

    //写字
    ctx.fillStyle = '#1d89d5';
    ctx.font= fontSize + 'px Microsoft Yahei';
    ctx.textAlign='center';
    ctx.fillText( Math.round((tmpAngle -  startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);

    requestAnimationFrame(rander);
  };

  rander();
  </script>
</body>
</html>

思路:

通过重新定义圆点坐标为(0,0),然后通过在规定范围内旋转图形,进行单点绘制。

相关函数:

context.translate(x,y);

Canvas三种动态画圆实现方法说明(小结)

context.rotate(angle);

Canvas三种动态画圆实现方法说明(小结)

方法三:获取圆坐标方式 动态画圆

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style type="text/css">
    #myCanvas{
        margin: 0 auto;
        display: block;
    }
    </style>
</head>
<body>
  <canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas>

  <script type="text/javascript">
  //方法三:获取圆坐标方式 动态画圆
  var c = document.getElementById('myCanvas');
  var ctx = c.getContext('2d');

  var mW = c.width = 300;
  var mH = c.height = 300;
  var lineWidth = 5;
  var r = mW / 2; //中间位置
  var cR = r - 4 * lineWidth; //圆半径
  var startAngle = -(1 / 2 * Math.PI); //开始角度
  var endAngle = startAngle + 2 * Math.PI; //结束角度
  var xAngle = 2 * (Math.PI / 180); //偏移角度量
  var cArr = []; //圆坐标数组

  //初始化圆坐标数组
  for(var i = startAngle; i <= endAngle; i += xAngle){
    //通过sin()和cos()获取每个角度对应的坐标
    var x = r + cR * Math.cos(i);
    var y = r + cR * Math.sin(i);

    cArr.push([x, y]);
  }

  //移动到开始点
  var startPoint = cArr.shift();
  ctx.beginPath();
  ctx.moveTo(startPoint[0], startPoint[1]);

  //渲染函数
  var rander = function(){
    //画圈
    if(cArr.length){
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = '#1c86d1';    

      var tmpPoint = cArr.shift();
      ctx.lineTo(tmpPoint[0], tmpPoint[1]);

      ctx.stroke();      
    }else{
      cArr = null;
      return;
    }

    requestAnimationFrame(rander);
  };

  rander();
  </script>
</body>
</html>

思路:

通过sin()cos()按一定的角度偏移量,将开始角度和结束角度之间的坐标位置存于数组中,然后按照数组中的坐标点进行绘制。

关于坐标点的计算,设计到了一些数学知识,这里我做了一张说明图:

Canvas三种动态画圆实现方法说明(小结)

效果

Canvas三种动态画圆实现方法说明(小结)

后记

通过上面的绘画方法,大家可以稍加修改制作成进度条插件。

到此这篇关于Canvas三种动态画圆实现方法说明(小结)的文章就介绍到这了,更多相关Canvas动态画圆内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
Javascript 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
Javascript之旅 对象的原型链之由来
Aug 25 Javascript
按钮JS复制文本框和表格的代码
Apr 01 Javascript
JavaScript中两个感叹号的作用说明
Dec 28 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
vue2.0 循环遍历加载不同图片的方法
Mar 06 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
vue 使用原生组件上传图片的实例
Sep 08 Javascript
如何在CocosCreator里画个炫酷的雷达图
jquery插件实现图片悬浮
详解CocosCreator消息分发机制
Apr 16 #Javascript
CocosCreator入门教程之网络通信
Apr 16 #Javascript
JavaScript嵌入百度地图API的最详细方法
用javascript制作qq注册动态页面
利用javaScript处理常用事件详解
Apr 14 #Javascript
You might like
PHP模板引擎SMARTY
2006/10/09 PHP
php版阿里云OSS图片上传类详解
2016/12/01 PHP
YII2框架中behavior行为的理解与使用方法示例
2020/03/13 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
jquery选择器的选择使用及性能介绍
2013/01/16 Javascript
jquery.qtip提示信息插件用法简单实例
2016/06/17 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
基于vue配置axios的方法步骤
2017/11/09 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
JS验证输入的是否是数字及保留几位小数问题
2018/05/09 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
2018/11/14 Javascript
前端路由&amp;webpack基础配置详解
2019/06/10 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
2020/03/23 Javascript
python实现读取命令行参数的方法
2015/05/22 Python
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
对python列表里的字典元素去重方法详解
2019/01/21 Python
python Tkinter的图片刷新实例
2019/06/14 Python
pow在python中的含义及用法
2019/07/11 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
新西兰演唱会和体育门票网站:Ticketmaster新西兰
2017/10/07 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
女方婚礼新郎答谢词
2014/01/11 职场文书
学子宴答谢词
2014/01/25 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
培训督导岗位职责
2015/04/10 职场文书
会计稽核岗位职责
2015/04/13 职场文书
农村婚礼司仪主持词
2015/06/29 职场文书
《唯一的听众》教学反思
2016/02/18 职场文书