How to implement canvas ring countdown component
This article mainly introduces the sample code of the canvas ring countdown component. The content is quite good. I will share it with you now and give it as a reference.
This article introduces the sample code of the canvas ring countdown component and shares it with everyone. The details are as follows:
The effect is as shown in Figure 1:
Canvas ring countdown component
Canvas ring countdown is a countdown based on Canvas. It is recommended to use it on the mobile terminal
Canvas ring countdown download address
1. How to use
1. html code
The ID attribute can be named as you like
<canvas id="canvas"></canvas>
2. Introduce process.js file
Page reference
<script src="js/process.js"></script>
3. Initialization parameters
Example Just change
<script> window.onload = function () { let ctd = new Countdown(); ctd.init(); }; </script>
2. Description of settings parameters
The following parameters are not required , can be configured according to specific needs
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 }); };
3. Sample code
html
Title <script src="js/process.js"></script> <script> window.onload = function () { let ctd = new Countdown(); ctd.init(); }; </script>
js
/** * Created by 谭瞎 on 2018/3/15. */ 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]; } }
##4. Additional - canvas preparation Work
canvas is actually not that mysterious. It is nothing more than an H5 tag, just like other HTML tags:<canvas id="canvas"></canvas>
<canvas id="canvas" width="130" height="130"></canvas>
var c = document.getElementById("canvas"); var ctx = c.getContext("2d");
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();
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();
3. Start drawing a blue inner circle, the center of the circle is (size/2, size/2), the radius is (size-23), and then add a 4px white border to it.
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();
4. Draw text and center it vertically
ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "#fff"; // ctx.fillText(文字,相对画布的X坐标,相对画布的Y坐标) ctx.fillText(30, size / 2, size / 2);
5. How to make animation? In fact, it is also a process of drawing a white circle, a process of slowly covering the yellow progress bar. Then draw the white circle first. At this time, the blue circle will be covered by the white animated circle. At this time, the last blue circle will be drawn. alright.
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();
6. The relatively simple painting process is completed. Next, we need to associate the animation with the numbers and use the current The latest time - the most starting time, and then dividing the total time can get a key percentage. This percentage determines the change of the number and the angle at which the white animated circle is drawn.
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(); };
Process-oriented version
/** * 进度条动画 */ 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(); },
The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
How to use Canvas to operate pixels
##About the properties of canvas lines
How to use canvas to implement image mosaic
The above is the detailed content of How to implement canvas ring countdown component. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

C++ is a widely used programming language that is very convenient and practical in writing countdown programs. Countdown program is a common application that can provide us with very precise time calculation and countdown functions. This article will introduce how to use C++ to write a simple countdown program. The key to implementing a countdown program is to use a timer to calculate the passage of time. In C++, we can use the functions in the time.h header file to implement the timer function. The following is the code for a simple countdown program

How to use Vue to implement button countdown effects With the increasing popularity of web applications, we often need to use some dynamic effects to improve user experience when users interact with the page. Among them, the countdown effect of the button is a very common and practical effect. This article will introduce how to use the Vue framework to implement button countdown effects and give specific code examples. First, we need to create a Vue component that contains a button and countdown function. In Vue, a component is a reusable Vue instance, and a view will

The canvas arrow plug-ins include: 1. Fabric.js, which has a simple and easy-to-use API and can create custom arrow effects; 2. Konva.js, which provides the function of drawing arrows and can create various arrow styles; 3. Pixi.js , which provides rich graphics processing functions and can achieve various arrow effects; 4. Two.js, which can easily create and control arrow styles and animations; 5. Arrow.js, which can create various arrow effects; 6. Rough .js, you can create hand-drawn arrows, etc.

The details of the canvas clock include clock appearance, tick marks, digital clock, hour, minute and second hands, center point, animation effects, other styles, etc. Detailed introduction: 1. Clock appearance, you can use Canvas to draw a circular dial as the appearance of the clock, and you can set the size, color, border and other styles of the dial; 2. Scale lines, draw scale lines on the dial to represent hours or minutes. Position; 3. Digital clock, you can draw a digital clock on the dial to indicate the current hour and minute; 4. Hour hand, minute hand, second hand, etc.

In win10, the boot countdown is enabled by default. When we turn on the computer, we will see a countdown interface, usually a 10-second countdown. Within this time, we can choose whether to continue booting or perform some other operations. Although the boot countdown brings some convenience to our system, it may also cause trouble in some cases. I want to cancel the display, but I don’t know how to do it. This article brings you how to cancel the countdown of several seconds after booting up Win10. Understand the win10 boot countdown. In win10, the boot countdown is enabled by default. When we turn on the computer, we will see a countdown interface, usually a 10-second countdown. Within this time, we can choose whether to continue booting or proceed

The versions of html2canvas include html2canvas v0.x, html2canvas v1.x, etc. Detailed introduction: 1. html2canvas v0.x, which is an early version of html2canvas. The latest stable version is v0.5.0-alpha1. It is a mature version that has been widely used and verified in many projects; 2. html2canvas v1.x, this is a new version of html2canvas.

Invalid styles include CSS3 animations and transitions, CSS filter effects, CSS3 complex graphics and paths, some CSS3 features, pseudo elements and some CSS features, Z-index, background images and gradients, etc. Detailed introduction: 1. CSS3 animation and transition: html2canvas may not fully capture CSS3 animation and transition effects. Although attempts will be made to capture the final style, these animations and transitions may be lost during the conversion process; 2. CSS filter effects: filters such as blur and shadow may not be retained during the conversion process, etc.

With the rapid development of science and technology and the widespread application of information technology in the field of education, Canvas, as a world-leading online learning management system, is gradually emerging in the Chinese education industry. The emergence of Canvas provides new possibilities for the reform of education and teaching methods in China. This article will explore the development trends and prospects of Canvas in China’s education sector. First of all, one of the development trends of Canvas in China’s education sector is in-depth integration. With the rapid development of cloud computing, big data and artificial intelligence, Canvas will increasingly
