经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » HTML5 » 查看文章
Canvas三种动态画圆实现方法说明(小结)
来源:jb51  时间:2021/4/19 8:39:50  对本文有异议

前言

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

方法一:arc()实现画圆

代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <style type="text/css">
  6. #myCanvas{
  7. margin: 0 auto;
  8. display: block;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas>
  14.  
  15. <script type="text/javascript">
  16. //方法一:arc 动态画圆
  17. var c = document.getElementById('myCanvas');
  18. var ctx = c.getContext('2d');
  19.  
  20. var mW = c.width = 300;
  21. var mH = c.height = 300;
  22. var lineWidth = 5;
  23. var r = mW / 2; //中间位置
  24. var cR = r - 4 * lineWidth; //圆半径
  25. var startAngle = -(1 / 2 * Math.PI); //开始角度
  26. var endAngle = startAngle + 2 * Math.PI; //结束角度
  27. var xAngle = 1 * (Math.PI / 180); //偏移角度量
  28. var fontSize = 35; //字号大小
  29. var tmpAngle = startAngle; //临时角度变量
  30.  
  31. //渲染函数
  32. var rander = function(){
  33. if(tmpAngle >= endAngle){
  34. return;
  35. }else if(tmpAngle + xAngle > endAngle){
  36. tmpAngle = endAngle;
  37. }else{
  38. tmpAngle += xAngle;
  39. }
  40. ctx.clearRect(0, 0, mW, mH);
  41.  
  42. //画圈
  43. ctx.beginPath();
  44. ctx.lineWidth = lineWidth;
  45. ctx.strokeStyle = '#1c86d1';
  46. ctx.arc(r, r, cR, startAngle, tmpAngle);
  47. ctx.stroke();
  48. ctx.closePath();
  49.  
  50. //写字
  51. ctx.fillStyle = '#1d89d5';
  52. ctx.font= fontSize + 'px Microsoft Yahei';
  53. ctx.textAlign='center';
  54. ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
  55.  
  56. requestAnimationFrame(rander);
  57. };
  58.  
  59. rander();
  60. </script>
  61. </body>
  62. </html>

思路:

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

相关函数:

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

这里写图片描述

方法二:rotate() 动态画圆

代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <style type="text/css">
  6. #myCanvas{
  7. margin: 0 auto;
  8. display: block;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas>
  14.  
  15. <script type="text/javascript">
  16. //方法二:rotate() 动态画圆
  17. var c = document.getElementById('myCanvas');
  18. var ctx = c.getContext('2d');
  19.  
  20. var mW = c.width = 300;
  21. var mH = c.height = 300;
  22. var lineWidth = 5;
  23. var r = mW / 2; //中间位置
  24. var cR = r - 4 * lineWidth; //圆半径
  25. var startAngle = -(1 / 2 * Math.PI); //开始角度
  26. var endAngle = startAngle + 2 * Math.PI; //结束角度
  27. var xAngle = 1 * (Math.PI / 180); //偏移角度量
  28. var fontSize = 35; //字号大小
  29. var tmpAngle = startAngle; //临时角度变量
  30.  
  31. //渲染函数
  32. var rander = function(){
  33. if(tmpAngle >= endAngle){
  34. return;
  35. }else if(tmpAngle + xAngle > endAngle){
  36. tmpAngle = endAngle;
  37. }else{
  38. tmpAngle += xAngle;
  39. }
  40. ctx.clearRect(0, 0, mW, mH);
  41.  
  42. //画圈
  43. ctx.save();
  44. ctx.beginPath();
  45. ctx.lineWidth = lineWidth;
  46. ctx.strokeStyle = '#1c86d1';
  47. ctx.translate(r, r); //重定义圆点
  48. ctx.rotate(-Math.PI); //最上方为起点
  49. for(var i = 0; i <= tmpAngle - startAngle; i += xAngle){ //绘图
  50. ctx.moveTo(0, cR - lineWidth);
  51. ctx.lineTo(0, cR);
  52. ctx.rotate(xAngle); //通过旋转角度和画点的方式绘制圆
  53. }
  54. ctx.stroke();
  55. ctx.closePath();
  56. ctx.restore();
  57.  
  58. //写字
  59. ctx.fillStyle = '#1d89d5';
  60. ctx.font= fontSize + 'px Microsoft Yahei';
  61. ctx.textAlign='center';
  62. ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
  63.  
  64. requestAnimationFrame(rander);
  65. };
  66.  
  67. rander();
  68. </script>
  69. </body>
  70. </html>

思路:

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

相关函数:

  1. context.translate(x,y);

这里写图片描述

  1. context.rotate(angle);

这里写图片描述

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

代码:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <style type="text/css">
  6. #myCanvas{
  7. margin: 0 auto;
  8. display: block;
  9. }
  10. </style>
  11. </head>
  12. <body>
  13. <canvas id="myCanvas">当前浏览器不支持canvas组件请升级!</canvas>
  14.  
  15. <script type="text/javascript">
  16. //方法三:获取圆坐标方式 动态画圆
  17. var c = document.getElementById('myCanvas');
  18. var ctx = c.getContext('2d');
  19.  
  20. var mW = c.width = 300;
  21. var mH = c.height = 300;
  22. var lineWidth = 5;
  23. var r = mW / 2; //中间位置
  24. var cR = r - 4 * lineWidth; //圆半径
  25. var startAngle = -(1 / 2 * Math.PI); //开始角度
  26. var endAngle = startAngle + 2 * Math.PI; //结束角度
  27. var xAngle = 2 * (Math.PI / 180); //偏移角度量
  28. var cArr = []; //圆坐标数组
  29.  
  30. //初始化圆坐标数组
  31. for(var i = startAngle; i <= endAngle; i += xAngle){
  32. //通过sin()和cos()获取每个角度对应的坐标
  33. var x = r + cR * Math.cos(i);
  34. var y = r + cR * Math.sin(i);
  35.  
  36. cArr.push([x, y]);
  37. }
  38.  
  39. //移动到开始点
  40. var startPoint = cArr.shift();
  41. ctx.beginPath();
  42. ctx.moveTo(startPoint[0], startPoint[1]);
  43.  
  44. //渲染函数
  45. var rander = function(){
  46. //画圈
  47. if(cArr.length){
  48. ctx.lineWidth = lineWidth;
  49. ctx.strokeStyle = '#1c86d1';
  50.  
  51. var tmpPoint = cArr.shift();
  52. ctx.lineTo(tmpPoint[0], tmpPoint[1]);
  53.  
  54. ctx.stroke();
  55. }else{
  56. cArr = null;
  57. return;
  58. }
  59.  
  60. requestAnimationFrame(rander);
  61. };
  62.  
  63. rander();
  64. </script>
  65. </body>
  66. </html>

思路:

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

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

这里写图片描述

效果

这里写图片描述

后记

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

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号