扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >如何在canvas中使用环形倒计时组件
  • 293

0
分享到

如何在canvas中使用环形倒计时组件

2023-06-09 14:06:37 293人浏览 安东尼
摘要

这篇文章将为大家详细讲解有关如何在canvas中使用环形倒计时组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。Canvas环形倒计时组件Canvas环形倒计时是基于Canvas实现的倒计时

这篇文章将为大家详细讲解有关如何在canvas中使用环形倒计时组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

Canvas环形倒计时组件

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

Canvas环形倒计时 下载地址

一、如何使用

html代码

ID属性可随意取名

<canvas id="canvas"></canvas>

引入process.js文件

页面引用

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

初始化参数

实例化即可

<script>    window.onload = function () {        let ctd = new Countdown();        ctd.init();    };</script>

二、settings参数说明

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

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

三、示例代码

html

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body {            background: #c2c1ce;        }        .container {            position: absolute;            left: 50%;            top: 50%;            transfORM: translate(-50%, -50%);            width: 130px;            height: 130px;            text-align: center;        }    </style></head><body><div class="container">    <canvas class="canvas" id="canvas"></canvas></div><script src="js/process.js"></script><script>    window.onload = function () {        let ctd = new Countdown();        ctd.init();    };</script></body></html>

js

function Countdown() {    // 设置默认参数    this.settings = {        id: "canvas",         // ID，canvas一定要有ID属性        size: 130,            // 绘制圆形的最大尺寸，宽=高        borderWidth: 4,       // 边框宽度        borderColor:"#fff",   // 边框颜色        outerColor:"#fff",    // 最外层底圆颜色        scheduleColor:"#fff", // 进度条动画颜色        fontColor: "#fff",    // 字体颜色        ringColor: "#ffc720", // 进度条环形颜色        innerColor: "#4e84e5",// 最内圆底色        fontSize: 50,        time: 5    }}Countdown.prototype.init = function (opt) {    this.obj = document.getElementById(this.settings.id);    this.obj.width = this.settings.size;    this.obj.height = this.settings.size;    this.ctx = this.obj.getContext("2d");    extend(this.settings, opt);    this.countdown();};// 绘制底色Countdown.prototype.drawBackground = function () {    this.drawCircle(0, 360, 0, this.settings.outerColor);};// 绘制进度条动画背景Countdown.prototype.drawProcess = function () {    this.drawCircle(0, 360, 4, this.settings.ringColor);};// 绘制倒计时Countdown.prototype.drawInner = function () {    this.drawCircle(0, 360, 23, this.settings.innerColor);    this.strokeBorder(this.settings.borderWidth);};// 绘制进度条动画Countdown.prototype.drawAnimate = function () {    // 旋转的角度    let deg = Math.PI / 180;    let v = schedule * 360,        startAng = -90,        endAng = -90 + v;    this.ctx.beginPath();    this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2);    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -3, startAng * deg, endAng * deg, false);    this.ctx.fillStyle = this.settings.scheduleColor;    this.ctx.fill();    this.ctx.closePath();};// 绘制边框Countdown.prototype.strokeBorder = function (borderWidth) {    this.ctx.lineWidth = borderWidth;    this.ctx.strokeStyle = this.settings.borderColor;    this.ctx.stroke();};// 绘制文字Countdown.prototype.strokeText = function (text) {    this.ctx.textAlign = "center";    this.ctx.textBaseline = "middle";    this.ctx.font = this.settings.fontSize+"px"+ " microsoft yahei";    this.ctx.fillStyle = this.settings.fontColor;    this.ctx.fillText(text, this.settings.size / 2, this.settings.size / 2);};// 绘制圆Countdown.prototype.drawCircle = function (startAng, endAng, border, fillColor) {    let deg = Math.PI / 180;    this.ctx.beginPath();    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 -border, startAng * deg, endAng * deg, false);    this.ctx.fillStyle = fillColor;    this.ctx.fill();    this.ctx.closePath();};// 进度条动画Countdown.prototype.countdown = function () {    let oldTime = +new Date();    timer = setInterval(() => {        let allMs = this.settings.time * 1000,// 如30*1000=30 000ms            currentTime = +new Date();        // 步长=（当前的时间-过去的时间）/总秒数        schedule = (currentTime - oldTime) / allMs;        this.schedule = schedule;        this.drawAll(schedule);        if (currentTime - oldTime >= allMs) {            // 重绘            this.drawBackground();            this.drawProcess();            this.drawAnimate();            this.drawInner();            this.strokeText(0);            clearInterval(timer);        }    }, 100);};// 绘制所有Countdown.prototype.drawAll = function (schedule) {    schedule = schedule >= 1 ? 1 : schedule;    let text = parseInt(this.settings.time * (1 - schedule)) + 1;    // 清除画布    this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);    this.drawBackground();    this.drawProcess();    this.drawAnimate();    this.drawInner();    this.strokeText(text);};// 对象拷贝function extend(obj1,obj2){    for(let attr in obj2){        obj1[attr] = obj2[attr];    }}

四、附加&mdash;&mdash;canvas准备工作

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

<canvas id="canvas"></canvas>

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

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

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

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

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

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

如何在canvas中使用环形倒计时组件

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

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

如何在canvas中使用环形倒计时组件

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

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

如何在canvas中使用环形倒计时组件

绘制文字，垂直居中

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

如何在canvas中使用环形倒计时组件

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

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

如何在canvas中使用环形倒计时组件

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

Countdown.prototype.countdown = function () {    let oldTime = +new Date();// 过去的时间：1522136419291    timer = setInterval(() => {        let currentTime = +new Date();// 现在的时间：1522136419393        let allMs = this.settings.time * 1000;// 总时间豪秒数：如30*1000=30 000ms        schedule = (currentTime - oldTime) / allMs;// 绘制百分比：（1522136419393-1522136419291）/30000=0.0204        this.schedule = schedule;        this.drawAll(schedule);        if (currentTime - oldTime >= allMs) {            // 重绘            this.drawBackground();            this.drawProcess();            this.drawAnimate();            this.drawInner();            this.strokeText(0);            clearInterval(timer);        }    }, 10);};// 绘制所有Countdown.prototype.drawAll = function (schedule) {    schedule = schedule >= 1 ? 1 : schedule;    let text = parseInt(this.settings.time * (1 - schedule)) + 1;    // 清除画布    this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);    this.drawBackground();    this.drawProcess();    this.drawAnimate();    this.drawInner();    this.strokeText(text);};// 绘制进度条动画Countdown.prototype.drawAnimate = function () {    // 旋转的角度    let deg = Math.PI / 180;    let v = schedule * 360,        startAng = -90,// 开始角度        endAng = -90 + v;// 结束角度    this.ctx.beginPath();    this.ctx.moveTo(this.settings.size / 2, this.settings.size / 2);    this.ctx.arc(this.settings.size / 2, this.settings.size / 2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false);    this.ctx.fillStyle = this.settings.scheduleColor;    this.ctx.fill();    this.ctx.closePath();};

如何在canvas中使用环形倒计时组件

面向过程版本

    countdown: function () {        this.getSystemInfo().then(v => {            // 自适应            let width = v.windowWidth,                size = width >= 414 ? 66 : 400 / 414 * 66;            size = parseInt(size);            size = size % 2 ? size + 1 : size;            let maxtime =30,                sTime = +new Date,                temp = setInterval(() => {                    let time = maxtime * 1000,                        currentTime = +new Date,                        schedule = (currentTime - sTime) / time;                    this.drew(schedule, maxtime, size);                    if (currentTime - sTime >= time) {                        // 绘制文字                        this.setData({                            schedule: 0                        });                        clearInterval(temp);                    };                }, 100);        });    },        drew: function (schedule, val, size) {        size = size || 66;        const _ts = this;        schedule = schedule >= 1 ? 1 : schedule;        let text = parseInt(val - val * schedule),            r = size / 2,            deg = Math.PI / 180;        _ts.setData({            width: size,            height: size,            schedule: text + 1        });        // 清除画布        ctx.clearRect(0, 0, size, size);        // 绘制白色底        ctx.beginPath();        ctx.arc(r, r, r, 0 * deg, 360 * deg);        ctx.fillStyle = 'rgba(255,255,255,1)';        ctx.closePath();        ctx.fill();        // 绘制橙色        ctx.beginPath();        ctx.arc(r, r, r - 2, 0 * deg, 360 * deg);        ctx.fillStyle = 'rgba(248,200,80,1)';        ctx.closePath();        ctx.fill();        // 绘制白色进度条        let v = schedule * 360;        ctx.beginPath();        ctx.moveTo(r, r);        ctx.arc(r, r, r, -90 * deg, (-90 + v) * deg);        ctx.fillStyle = 'rgba(255,255,255,1)';        ctx.closePath();        ctx.fill();        // 中心蓝色底        ctx.beginPath();        ctx.arc(r, r, r - 12, 0 * deg, 360 * deg);        ctx.fillStyle = 'rgba(90,140,220,1)';        ctx.closePath();        ctx.fill();        // 绘制文字        ctx.strokeText();                // 统一画        ctx.draw();                },

关于如何在canvas中使用环形倒计时组件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

--结束END--

本文标题: 如何在canvas中使用环形倒计时组件

本文链接: https://lsjlt.com/news/256319.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何在canvas中使用环形倒计时组件
    这篇文章将为大家详细讲解有关如何在canvas中使用环形倒计时组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。Canvas环形倒计时组件Canvas环形倒计时是基于Canvas实现的倒计时...
    99+
    2023-06-09
  • angular倒计时组件如何使用
    这篇文章主要介绍“angular倒计时组件如何使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“angular倒计时组件如何使用”文章能帮助大家解决问题。组件cou...
    99+
    2024-04-02
  • vue2.0中如何使用countdown倒计时组件
    这期内容当中小编将会给大家带来有关vue2.0中如何使用countdown倒计时组件，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。安装npm install vue2-c...
    99+
    2024-04-02
  • React如何实现倒计时组件
    这篇文章将为大家详细讲解有关React如何实现倒计时组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。倒计时组件&mdash;&mdash;需求描述：写一个函数式组件CountDown，设...
    99+
    2023-06-29
  • 如何利用momentJs做一个倒计时组件
    今天就跟大家聊聊有关如何利用momentJs做一个倒计时组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。vue和moment做的一个倒计时展示样式：<template>...
    99+
    2023-06-22
  • vue如何设计一个倒计时秒杀的组件
    这篇文章将为大家详细讲解有关vue如何设计一个倒计时秒杀的组件，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。简介：倒计时秒杀组件在电商网站中层出不穷  不过思路...
    99+
    2024-04-02
  • Win10如何使用计时器(倒计时)测量时间
    　　Win10的新版闹钟应用里包含闹钟、秒表、计时器、世界时间四个跟时间设置有关的小软件，我们介绍了闹钟和秒表的使用。那么如何使用计时器呢 　　打开倒计时 　　如何设置 　　我们可以使用鼠标移动圆圈的结束按钮，设置我们的...
    99+
    2023-06-12
    Win10 计时器 时间 测量 倒计时
  • 如何使用JavaScript制作倒计时牌
    这篇文章主要为大家展示了“如何使用JavaScript制作倒计时牌”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用JavaScript制作倒计时牌”这篇文章吧。　　把下面的JavaScri...
    99+
    2023-06-03
  • JavaScript如何在控件上添加倒计时功能
    这篇文章主要介绍了JavaScript如何在控件上添加倒计时功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一.概述在有些 报表 需求中，...
    99+
    2024-04-02
  • 如何在Android中使用Handler与Countdowntimer实现一个倒计时功能
    本篇文章为大家展示了如何在Android中使用Handler与Countdowntimer实现一个倒计时功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。实现方法去除actionBar闪屏页面一般都...
    99+
    2023-05-31
    android handler countdowntimer
  • 如何实现在线答题中的倒计时功能
    随着互联网的快速发展和智能设备的普及，越来越多的教育活动也开始向线上迁移，其中包括在线答题。在线答题作为一种新型的教育形式，可以提供更加便捷和灵活的学习方式，受到了越来越多的使用者的青睐。其中一个重要的功能就是倒计时，在规定的时间内完成答题...
    99+
    2023-10-21
    实现 倒计时 在线答题
  • Android 中不用线程如何实现倒计时
    需求： 有多个组件可以开启倒计时，正常情况下默认倒计时时间终了后更新UI，另，用户可以取消指定倒计时。 这里使用CountDownTimer进行倒计时，其中回调函数onFini...
    99+
    2022-06-06
    倒计时 线程 Android
  • 如何使用jQuery插件开发发送短信倒计时功能
    小编给大家分享一下如何使用jQuery插件开发发送短信倒计时功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！实现的主要功能如下...
    99+
    2024-04-02
  • 如何使用原生js实现倒计时功能
    这篇文章给大家分享的是有关如何使用原生js实现倒计时功能的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。<!DOCTYPE html><html&nbs...
    99+
    2024-04-02
  • 如何在python中利用tkinter在屏幕中间实现一个倒计时功能
    如何在python中利用tkinter在屏幕中间实现一个倒计时功能？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。Python主要用来做什么Python主要应用于：1、Web...
    99+
    2023-06-07
  • 如何使用Python实现windows倒计时锁屏功能
    实现思路1）主要介绍了python实现windows倒计时锁屏功能python实现实windows倒计时锁屏功能 # 倒计时锁屏 import time from ctypes import * def closewindows(close...
    99+
    2023-05-14
    Python Windows
  • 如何在HTML5中使用Canvas标签
    本篇文章为大家展示了如何在HTML5中使用Canvas标签，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。HTML 5 <canvas> 标签定义和用法<canvas> 标签定...
    99+
    2023-06-09
  • 如何在vue中使用backtop组件
    如何在vue中使用backtop组件？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。代码：<template> <div class=&qu...
    99+
    2023-06-14
  • 如何在Android中使用PopupMenu组件
    本篇文章给大家分享的是有关如何在Android中使用PopupMenu组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。1.创建资源文件在 res 目录下新建 menu 文件夹...
    99+
    2023-05-31
    android popupmenu
  • 如何在Java中使用JFileChooser组件
    这篇文章将为大家详细讲解有关如何在Java中使用JFileChooser组件，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。JFileChooser文件选择器是Swing中经常用到的一个控件。...
    99+
    2023-05-30
    java jfilechooser
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作