当前位置：Gxlcms > css > 如何实现canvas环形倒计时组件

如何实现canvas环形倒计时组件

时间：2021-07-01 10:21:17 帮助过：49人阅读

本篇文章主要介绍了canvas环形倒计时组件的示例代码，内容挺不错的，现在分享给大家，也给大家做个参考。

本文介绍了canvas环形倒计时组件的示例代码，分享给大家，具体如下：

效果如下图一：

Canvas环形倒计时组件

Canvas环形倒计时是基于Canvas实现的倒计时，建议于移动端使用

Canvas环形倒计时 下载地址

一、如何使用

1. html代码

ID属性可随意取名

  1. <canvas id="canvas"></canvas>

2. 引入process.js文件

页面引用

  1. <script src="js/process.js"></script>

3. 初始化参数

实例化即可

  1. <script>
  2.     window.onload = function () {
  3.         let ctd = new Countdown();
  4.         ctd.init();
  5.     };
  6. </script>

二、settings参数说明

以下参数非必选项，可根据具体需求配置

  1. window.onload = function () {
  2.         let ctd = new Countdown();
  3.         ctd.init({
  4.             id: "canvas",         // ID，canvas一定要有ID属性
  5.             size: 130,            // 绘制圆形的最大尺寸，宽=高
  6.             borderWidth: 4,       // 边框宽度
  7.             borderColor:"#fff",   // 边框颜色
  8.             outerColor:"#fff",    // 最外层底圆颜色
  9.             scheduleColor:"#fff", // 进度条动画颜色
  10.             fontColor: "#fff",    // 字体颜色
  11.             ringColor: "#ffc720", // 进度条环形颜色
  12.             innerColor: "#4e84e5",// 最内圆底色
  13.             fontSize: 50,
  14.             time: 5
  15.         });
  16.     };

三、示例代码

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         body {
  8.             background: #c2c1ce;
  9.         }
  10.         .container {
  11.             position: absolute;
  12.             left: 50%;
  13.             top: 50%;
  14.             transform: translate(-50%, -50%);
  15.             width: 130px;
  16.             height: 130px;
  17.             text-align: center;
  18.         }
  19.     </style>
  20. </head>
  21. <body>
  22. <p class="container">
  23.     <canvas class="canvas" id="canvas"></canvas>
  24. </p>
  25. <script src="js/process.js"></script>
  26. <script>
  27.     window.onload = function () {
  28.         let ctd = new Countdown();
  29.         ctd.init();
  30.     };
  31. </script>
  32. </body>
  33. </html>

js

  1. /**
  2.  * Created by 谭瞎 on 2018/3/15.
  3.  */
  4. function Countdown() {
  5.     // 设置默认参数
  6.     this.settings = {
  7.         id: "canvas",         // ID，canvas一定要有ID属性
  8.         size: 130,            // 绘制圆形的最大尺寸，宽=高
  9.         borderWidth: 4,       // 边框宽度
  10.         borderColor:"#fff",   // 边框颜色
  11.         outerColor:"#fff",    // 最外层底圆颜色
  12.         scheduleColor:"#fff", // 进度条动画颜色
  13.         fontColor: "#fff",    // 字体颜色
  14.         ringColor: "#ffc720", // 进度条环形颜色
  15.         innerColor: "#4e84e5",// 最内圆底色
  16.         fontSize: 50,
  17.         time: 5
  18.     }
  19. }
  20. Countdown.prototype.init = function (opt) {
  21.     this.obj = document.getElementById(this.settings.id);
  22.     this.obj.width = this.settings.size;
  23.     this.obj.height = this.settings.size;
  24.     this.ctx = this.obj.getContext("2d");
  25.     extend(this.settings, opt);
  26.     this.countdown();
  27. };
  28. // 绘制底色
  29. Countdown.prototype.drawBackground = function () {
  30.     this.drawCircle(0, 360, 0, this.settings.outerColor);
  31. };
  32. // 绘制进度条动画背景
  33. Countdown.prototype.drawProcess = function () {
  34.     this.drawCircle(0, 360, 4, this.settings.ringColor);
  35. };
  36. // 绘制倒计时
  37. Countdown.prototype.drawInner = function () {
  38.     this.drawCircle(0, 360, 23, this.settings.innerColor);
  39.     this.strokeBorder(this.settings.borderWidth);
  40. };
  41. // 绘制进度条动画
  42. Countdown.prototype.drawAnimate = function () {
  43.     // 旋转的角度
  44.     let deg = Math.PI / 180;
  45.     let v = schedule * 360,
  46.         startAng = -90,
  47.         endAng = -90 + v;
  48.     this.ctx.beginPath();
  49.     this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2);
  50.     this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -3, startAng * deg, endAng * deg, false);
  51.     this.ctx.fillStyle = this.settings.scheduleColor;
  52.     this.ctx.fill();
  53.     this.ctx.closePath();
  54. };
  55. // 绘制边框
  56. Countdown.prototype.strokeBorder = function (borderWidth) {
  57.     this.ctx.lineWidth = borderWidth;
  58.     this.ctx.strokeStyle = this.settings.borderColor;
  59.     this.ctx.stroke();
  60. };
  61. // 绘制文字
  62. Countdown.prototype.strokeText = function (text) {
  63.     this.ctx.textAlign = "center";
  64.     this.ctx.textBaseline = "middle";
  65.     this.ctx.font = this.settings.fontSize+"px"+ " microsoft yahei";
  66.     this.ctx.fillStyle = this.settings.fontColor;
  67.     this.ctx.fillText(text, this.settings.size / 2, this.settings.size / 2);
  68. };
  69. // 绘制圆
  70. Countdown.prototype.drawCircle = function (startAng, endAng, border, fillColor) {
  71.     let deg = Math.PI / 180;
  72.     this.ctx.beginPath();
  73.     this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -border, startAng * deg, endAng * deg, false);
  74.     this.ctx.fillStyle = fillColor;
  75.     this.ctx.fill();
  76.     this.ctx.closePath();
  77. };
  78. // 进度条动画
  79. Countdown.prototype.countdown = function () {
  80.     let oldTime = +new Date();
  81.     timer = setInterval(() => {
  82.         let allMs = this.settings.time * 1000,// 如30*1000=30 000ms
  83.             currentTime = +new Date();
  84.         // 步长=（当前的时间-过去的时间）/总秒数
  85.         schedule = (currentTime - oldTime) / allMs;
  86.         this.schedule = schedule;
  87.         this.drawAll(schedule);
  88.         if (currentTime - oldTime >= allMs) {
  89.             // 重绘
  90.             this.drawBackground();
  91.             this.drawProcess();
  92.             this.drawAnimate();
  93.             this.drawInner();
  94.             this.strokeText(0);
  95.             clearInterval(timer);
  96.         }
  97.     }, 100);
  98. };
  99. // 绘制所有
  100. Countdown.prototype.drawAll = function (schedule) {
  101.     schedule = schedule >= 1 ? 1 : schedule;
  102.     let text = parseInt(this.settings.time * (1 - schedule)) + 1;
  103.     // 清除画布
  104.     this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
  105.     this.drawBackground();
  106.     this.drawProcess();
  107.     this.drawAnimate();
  108.     this.drawInner();
  109.     this.strokeText(text);
  110. };
  111. // 对象拷贝
  112. function extend(obj1,obj2){
  113.     for(let attr in obj2){
  114.         obj1[attr] = obj2[attr];
  115.     }
  116. }

四、附加——canvas准备工作

canvas其实没有那么玄乎，它不外乎是一个H5的标签，跟其它HTML标签如出一辙：

  1. <canvas id="canvas"></canvas>

注意最好在一开始的时候就给canvas设置好其宽高（若不设定宽高，浏览器会默认设置canvas大小为宽300、高100像素），而且不能使用css来设置（会被拉伸），建议直接写于canvas标签内部：

  1. <canvas id="canvas" width="130" height="130"></canvas>

canvas本身没有任何的绘图能力，所有的绘图工作都是通过js来实现的。通常我们在js通过getElementById来获取要操作的canvas（这意味着得给canvas设个id）：

  1. var c = document.getElementById("canvas");
  2. var ctx = c.getContext("2d");

1.准备好画笔之后就可以开始绘图了，环形其实就是半径不同的同心圆，圆心坐标是（size/2,size/2）, 先画一个最大的白色背景底圆，半径是size/2。

  1. let deg = Math.PI / 180;
  2. // beginPath()可以做到隔离路径绘制效果的作用，防止之前的效果被污染。
  3. ctx.beginPath();
  4. // tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
  5. ctx.arc(size / 2, size / 2, size / 2, 0* deg, 360 * deg, false);
  6. ctx.fillStyle = "#fff";
  7. ctx.fill();
  8. ctx.closePath();

2.开始画第二个黄色打底圆，圆心也是(size/2，size/2),只是半径比白色底圆小4px，所以黄色底圆的半径是(size/2-4)

  1. let deg = Math.PI / 180;
  2. // beginPath()可以做到隔离路径绘制效果的作用，防止之前的效果被污染。
  3. ctx.beginPath();
  4. // tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
  5. ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false);
  6. ctx.fillStyle = "#fff";
  7. ctx.fill();
  8. ctx.closePath();

3.开始画蓝色内圆，同理圆心为(size/2,size/2)，半径为(size-23)，再给它加上4px的白色边框。

  1. let deg = Math.PI / 180;
  2. // beginPath()可以做到隔离路径绘制效果的作用，防止之前的效果被污染。
  3. ctx.beginPath();
  4. // tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
  5. ctx.arc(size / 2, size / 2, size / 2-23, 0* deg, 360 * deg, false);
  6. ctx.fillStyle = "#fff";
  7. ctx.fill();
  8. ctx.closePath();
  9. // 白色边框
  10. ctx.lineWidth = 4;
  11. ctx.strokeStyle = #fff;
  12. ctx.stroke();

4.绘制文字，垂直居中

  1. ctx.textAlign = "center";
  2. ctx.textBaseline = "middle";
  3. ctx.fillStyle = "#fff";
  4. // ctx.fillText(文字，相对画布的X坐标，相对画布的Y坐标)
  5. ctx.fillText(30, size / 2, size / 2);

5.如何制作动画？其实也是画白色圆的过程，慢慢的覆盖黄色进度条的过程，那么先把白色的圆画出来出来，这个时候蓝圆就会被白色的动画圆给盖住，这个时候最后画蓝圆就好了。

  1. let deg = Math.PI / 180;
  2. ctx.beginPath();
  3. // tcx.arc(圆心X,圆心Y,半径,起始角度,结束角度,顺逆时针);
  4. ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false);
  5. ctx.fillStyle = "#fff";
  6. ctx.fill();
  7. ctx.closePath();

6.比较简单的绘画过程完成了，接下来要将动画和数字关联起来，利用当前的最新时间-最开始的时间，再除总的时间可以得到一个关键的百分比，这个百分比决定数字的变化，以及白色动画圆绘制的角度。

  1. Countdown.prototype.countdown = function () {
  2.     let oldTime = +new Date();// 过去的时间：1522136419291
  3.     timer = setInterval(() => {
  4.         let currentTime = +new Date();// 现在的时间：1522136419393
  5.         let allMs = this.settings.time * 1000;// 总时间豪秒数：如30*1000=30 000ms
  6.         schedule = (currentTime - oldTime) / allMs;// 绘制百分比：（1522136419393-1522136419291）/30000=0.0204
  7.         this.schedule = schedule;
  8.         this.drawAll(schedule);
  9.         if (currentTime - oldTime >= allMs) {
  10.             // 重绘
  11.             this.drawBackground();
  12.             this.drawProcess();
  13.             this.drawAnimate();
  14.             this.drawInner();
  15.             this.strokeText(0);
  16.             clearInterval(timer);
  17.         }
  18.     }, 10);
  19. };
  20. // 绘制所有
  21. Countdown.prototype.drawAll = function (schedule) {
  22.     schedule = schedule >= 1 ? 1 : schedule;
  23.     let text = parseInt(this.settings.time * (1 - schedule)) + 1;
  24.     // 清除画布
  25.     this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
  26.     this.drawBackground();
  27.     this.drawProcess();
  28.     this.drawAnimate();
  29.     this.drawInner();
  30.     this.strokeText(text);
  31. };
  32. // 绘制进度条动画
  33. Countdown.prototype.drawAnimate = function () {
  34.     // 旋转的角度
  35.     let deg = Math.PI / 180;
  36.     let v = schedule * 360,
  37.         startAng = -90,// 开始角度
  38.         endAng = -90 + v;// 结束角度
  39.     this.ctx.beginPath();
  40.     this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2);
  41.     this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false);
  42.     this.ctx.fillStyle = this.settings.scheduleColor;
  43.     this.ctx.fill();
  44.     this.ctx.closePath();
  45. };

面向过程版本

  1. /**
  2.     * 进度条动画
  3.     */
  4.     countdown: function () {
  5.         this.getSystemInfo().then(v => {
  6.             // 自适应
  7.             let width = v.windowWidth,
  8.                 size = width >= 414 ? 66 : 400 / 414 * 66;
  9.             size = parseInt(size);
  10.             size = size % 2 ? size + 1 : size;
  11.             let maxtime =30,
  12.                 sTime = +new Date,
  13.                 temp = setInterval(() => {
  14.                     let time = maxtime * 1000,
  15.                         currentTime = +new Date,
  16.                         schedule = (currentTime - sTime) / time;
  17.                     this.drew(schedule, maxtime, size);
  18.                     if (currentTime - sTime >= time) {
  19.                         // 绘制文字
  20.                         this.setData({
  21.                             schedule: 0
  22.                         });
  23.                         clearInterval(temp);
  24.                     };
  25.                 }, 100);
  26.         });
  27.     },
  28.     /**
  29.      * 绘制
  30.      */
  31.     drew: function (schedule, val, size) {
  32.         size = size || 66;
  33.         const _ts = this;
  34.         schedule = schedule >= 1 ? 1 : schedule;
  35.         let text = parseInt(val - val * schedule),
  36.             r = size / 2,
  37.             deg = Math.PI / 180;
  38.         _ts.setData({
  39.             width: size,
  40.             height: size,
  41.             schedule: text + 1
  42.         });
  43.         // 清除画布
  44.         ctx.clearRect(0, 0, size, size);
  45.         // 绘制白色底
  46.         ctx.beginPath();
  47.         ctx.arc(r, r, r, 0 * deg, 360 * deg);
  48.         ctx.fillStyle = 'rgba(255,255,255,1)';
  49.         ctx.closePath();
  50.         ctx.fill();
  51.         // 绘制橙色
  52.         ctx.beginPath();
  53.         ctx.arc(r, r, r - 2, 0 * deg, 360 * deg);
  54.         ctx.fillStyle = 'rgba(248,200,80,1)';
  55.         ctx.closePath();
  56.         ctx.fill();
  57.         // 绘制白色进度条
  58.         let v = schedule * 360;
  59.         ctx.beginPath();
  60.         ctx.moveTo(r, r);
  61.         ctx.arc(r, r, r, -90 * deg, (-90 + v) * deg);
  62.         ctx.fillStyle = 'rgba(255,255,255,1)';
  63.         ctx.closePath();
  64.         ctx.fill();
  65.         // 中心蓝色底
  66.         ctx.beginPath();
  67.         ctx.arc(r, r, r - 12, 0 * deg, 360 * deg);
  68.         ctx.fillStyle = 'rgba(90,140,220,1)';
  69.         ctx.closePath();
  70.         ctx.fill();
  71.         // 绘制文字
  72.         ctx.strokeText();
  73.         
  74.         // 统一画
  75.         ctx.draw();
  76.             
  77.     },

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何使用Canvas操作像素

关于canvas线条的属性

如何使用canvas实现图片马赛克

以上就是如何实现canvas环形倒计时组件的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！