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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
javascript实现unicode和字符的互相转换
Jul 18 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
Nov 26 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
Nov 09 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
Nov 25 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
Vue渲染函数详解
Sep 15 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
Apr 22 Javascript
原生JS进行前后端同构
Apr 22 Javascript
如何在CocosCreator里画个炫酷的雷达图
jquery插件实现图片悬浮
详解CocosCreator消息分发机制
Apr 16 #Javascript
CocosCreator入门教程之网络通信
Apr 16 #Javascript
JavaScript嵌入百度地图API的最详细方法
用javascript制作qq注册动态页面
利用javaScript处理常用事件详解
Apr 14 #Javascript
You might like
php 防止单引号,双引号在接受页面转义
2008/07/10 PHP
PHP中几个可以提高运行效率的代码写法、技巧分享
2014/08/21 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
如何确保JavaScript的执行顺序 之实战篇
2011/03/03 Javascript
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
js获取height和width的方法说明
2013/01/06 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
js实现索引图片切换效果
2015/11/21 Javascript
javascript表单正则应用
2017/02/04 Javascript
bootstrap daterangepicker汉化以及扩展功能
2017/06/15 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
微信小程序页面渲染实现方法
2019/11/06 Javascript
JS实现横向跑马灯效果代码
2020/04/20 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
基于ajax实现上传图片代码示例解析
2020/12/03 Javascript
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
python机器学习库xgboost的使用
2020/01/20 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
新奇的小玩意:IWOOT
2016/07/21 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
EJB的几种类型
2012/08/15 面试题
测试工程师岗位职责
2013/11/28 职场文书
个人收入证明范本
2014/01/12 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
优秀志愿者感言
2015/08/01 职场文书
我的中国梦主题班会
2015/08/14 职场文书
浅谈pytorch中的dropout的概率p
2021/05/27 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android
create-react-app开发常用配置教程
2022/06/25 Javascript