canvas環(huán)形倒計(jì)時(shí)組件的示例代碼
發(fā)布時(shí)間：2018-06-14 15:27:52 作者：譚瞎 
我要評(píng)論
我要評(píng)論本篇文章主要介紹了canvas環(huán)形倒計(jì)時(shí)組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
本文介紹了canvas環(huán)形倒計(jì)時(shí)組件的示例代碼，分享給大家，具體如下：
效果如下圖一：
Canvas環(huán)形倒計(jì)時(shí)組件
Canvas環(huán)形倒計(jì)時(shí)是基于Canvas實(shí)現(xiàn)的倒計(jì)時(shí)，建議于移動(dòng)端使用
Canvas環(huán)形倒計(jì)時(shí) 下載地址
一、如何使用
1. html代碼
ID屬性可隨意取名
<canvas id="canvas"></canvas>
2. 引入process.js文件
頁(yè)面引用
<script src="js/process.js"></script>
3. 初始化參數(shù)
實(shí)例化即可
<script>
window.onload = function () {
let ctd = new Countdown();
ctd.init();
};
</script>
二、settings參數(shù)說(shuō)明
以下參數(shù)非必選項(xiàng)，可根據(jù)具體需求配置
window.onload = function () {
let ctd = new Countdown();
ctd.init({
id: "canvas", // ID，canvas一定要有ID屬性
size: 130, // 繪制圓形的最大尺寸，寬=高
borderWidth: 4, // 邊框?qū)挾?
borderColor:"#fff", // 邊框顏色
outerColor:"#fff", // 最外層底圓顏色
scheduleColor:"#fff", // 進(jìn)度條動(dòng)畫(huà)顏色
fontColor: "#fff", // 字體顏色
ringColor: "#ffc720", // 進(jìn)度條環(huán)形顏色
innerColor: "#4e84e5",// 最內(nèi)圓底色
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
/**
* Created by 譚瞎 on 2018/3/15.
*/
function Countdown() {
// 設(shè)置默認(rèn)參數(shù)
this.settings = {
id: "canvas", // ID，canvas一定要有ID屬性
size: 130, // 繪制圓形的最大尺寸，寬=高
borderWidth: 4, // 邊框?qū)挾?
borderColor:"#fff", // 邊框顏色
outerColor:"#fff", // 最外層底圓顏色
scheduleColor:"#fff", // 進(jìn)度條動(dòng)畫(huà)顏色
fontColor: "#fff", // 字體顏色
ringColor: "#ffc720", // 進(jìn)度條環(huán)形顏色
innerColor: "#4e84e5",// 最內(nèi)圓底色
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);
};
// 繪制進(jìn)度條動(dòng)畫(huà)背景
Countdown.prototype.drawProcess = function () {
this.drawCircle(0, 360, 4, this.settings.ringColor);
};
// 繪制倒計(jì)時(shí)
Countdown.prototype.drawInner = function () {
this.drawCircle(0, 360, 23, this.settings.innerColor);
this.strokeBorder(this.settings.borderWidth);
};
// 繪制進(jìn)度條動(dòng)畫(huà)
Countdown.prototype.drawAnimate = function () {
// 旋轉(zhuǎn)的角度
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();
};
// 進(jìn)度條動(dòng)畫(huà)
Countdown.prototype.countdown = function () {
let oldTime = +new Date();
timer = setInterval(() => {
let allMs = this.settings.time * 1000,// 如30*1000=30 000ms
currentTime = +new Date();
// 步長(zhǎng)=（當(dāng)前的時(shí)間-過(guò)去的時(shí)間）/總秒數(shù)
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;
// 清除畫(huà)布
this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
this.drawBackground();
this.drawProcess();
this.drawAnimate();
this.drawInner();
this.strokeText(text);
};
// 對(duì)象拷貝
function extend(obj1,obj2){
for(let attr in obj2){
obj1[attr] = obj2[attr];
}
}
四、附加——canvas準(zhǔn)備工作
canvas其實(shí)沒(méi)有那么玄乎，它不外乎是一個(gè)H5的標(biāo)簽，跟其它HTML標(biāo)簽如出一轍：
<canvas id="canvas"></canvas>
注意最好在一開(kāi)始的時(shí)候就給canvas設(shè)置好其寬高（若不設(shè)定寬高，瀏覽器會(huì)默認(rèn)設(shè)置canvas大小為寬300、高100像素），而且不能使用css來(lái)設(shè)置（會(huì)被拉伸），建議直接寫(xiě)于canvas標(biāo)簽內(nèi)部：
<canvas id="canvas" width="130" height="130"></canvas>
canvas本身沒(méi)有任何的繪圖能力，所有的繪圖工作都是通過(guò)js來(lái)實(shí)現(xiàn)的。通常我們?cè)趈s通過(guò)getElementById來(lái)獲取要操作的canvas（這意味著得給canvas設(shè)個(gè)id）：
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
1.準(zhǔn)備好畫(huà)筆之后就可以開(kāi)始繪圖了，環(huán)形其實(shí)就是半徑不同的同心圓，圓心坐標(biāo)是（size/2,size/2）, 先畫(huà)一個(gè)最大的白色背景底圓，半徑是size/2。
let deg = Math.PI / 180; // beginPath()可以做到隔離路徑繪制效果的作用，防止之前的效果被污染。 ctx.beginPath(); // tcx.arc(圓心X,圓心Y,半徑,起始角度,結(jié)束角度,順逆時(shí)針); ctx.arc(size / 2, size / 2, size / 2, 0* deg, 360 * deg, false); ctx.fillStyle = "#fff"; ctx.fill(); ctx.closePath();
2.開(kāi)始畫(huà)第二個(gè)黃色打底圓，圓心也是(size/2，size/2),只是半徑比白色底圓小4px，所以黃色底圓的半徑是(size/2-4)
let deg = Math.PI / 180; // beginPath()可以做到隔離路徑繪制效果的作用，防止之前的效果被污染。 ctx.beginPath(); // tcx.arc(圓心X,圓心Y,半徑,起始角度,結(jié)束角度,順逆時(shí)針); ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false); ctx.fillStyle = "#fff"; ctx.fill(); ctx.closePath();
3.開(kāi)始畫(huà)藍(lán)色內(nèi)圓，同理圓心為(size/2,size/2)，半徑為(size-23)，再給它加上4px的白色邊框。
let deg = Math.PI / 180; // beginPath()可以做到隔離路徑繪制效果的作用，防止之前的效果被污染。 ctx.beginPath(); // tcx.arc(圓心X,圓心Y,半徑,起始角度,結(jié)束角度,順逆時(shí)針); 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.繪制文字，垂直居中
ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillStyle = "#fff"; // ctx.fillText(文字，相對(duì)畫(huà)布的X坐標(biāo)，相對(duì)畫(huà)布的Y坐標(biāo)) ctx.fillText(30, size / 2, size / 2);
5.如何制作動(dòng)畫(huà)？其實(shí)也是畫(huà)白色圓的過(guò)程，慢慢的覆蓋黃色進(jìn)度條的過(guò)程，那么先把白色的圓畫(huà)出來(lái)出來(lái)，這個(gè)時(shí)候藍(lán)圓就會(huì)被白色的動(dòng)畫(huà)圓給蓋住，這個(gè)時(shí)候最后畫(huà)藍(lán)圓就好了。
let deg = Math.PI / 180; ctx.beginPath(); // tcx.arc(圓心X,圓心Y,半徑,起始角度,結(jié)束角度,順逆時(shí)針); ctx.arc(size / 2, size / 2, size / 2-4, 0* deg, 360 * deg, false); ctx.fillStyle = "#fff"; ctx.fill(); ctx.closePath();
6.比較簡(jiǎn)單的繪畫(huà)過(guò)程完成了，接下來(lái)要將動(dòng)畫(huà)和數(shù)字關(guān)聯(lián)起來(lái)，利用當(dāng)前的最新時(shí)間-最開(kāi)始的時(shí)間，再除總的時(shí)間可以得到一個(gè)關(guān)鍵的百分比，這個(gè)百分比決定數(shù)字的變化，以及白色動(dòng)畫(huà)圓繪制的角度。
Countdown.prototype.countdown = function () {
let oldTime = +new Date();// 過(guò)去的時(shí)間：1522136419291
timer = setInterval(() => {
let currentTime = +new Date();// 現(xiàn)在的時(shí)間：1522136419393
let allMs = this.settings.time * 1000;// 總時(shí)間豪秒數(shù)：如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;
// 清除畫(huà)布
this.ctx.clearRect(0, 0, this.settings.size, this.settings.size);
this.drawBackground();
this.drawProcess();
this.drawAnimate();
this.drawInner();
this.strokeText(text);
};
// 繪制進(jìn)度條動(dòng)畫(huà)
Countdown.prototype.drawAnimate = function () {
// 旋轉(zhuǎn)的角度
let deg = Math.PI / 180;
let v = schedule * 360,
startAng = -90,// 開(kāi)始角度
endAng = -90 + v;// 結(jié)束角度
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();
};
面向過(guò)程版本
/**
* 進(jìn)度條動(dòng)畫(huà)
*/
countdown: function () {
this.getSystemInfo().then(v => {
// 自適應(yīng)
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
});
// 清除畫(huà)布
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();
// 繪制白色進(jìn)度條
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();
// 中心藍(lán)色底
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();
// 統(tǒng)一畫(huà)
ctx.draw();
},
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
HTML5實(shí)現(xiàn)的移動(dòng)端購(gòu)物車自動(dòng)結(jié)算功能示例代碼
本文介紹HTML5實(shí)現(xiàn)移動(dòng)端購(gòu)物車自動(dòng)結(jié)算,通過(guò)WebStorage、事件監(jiān)聽(tīng)、DOM操作等技術(shù),確保實(shí)時(shí)更新與數(shù)據(jù)同步,優(yōu)化性能及無(wú)障礙性,提升用戶體驗(yàn)，感興趣的朋友一起看看吧2025-06-18- 在HTML5中，<button>標(biāo)簽用于定義一個(gè)可點(diǎn)擊的按鈕，它是創(chuàng)建交互式網(wǎng)頁(yè)的重要元素之一，本文將深入解析HTML5中的<button>標(biāo)簽，詳細(xì)介紹其屬性、樣式以及實(shí)際2025-06-18
基于 HTML5 Canvas 實(shí)現(xiàn)圖片旋轉(zhuǎn)與下載功能(完整代碼展示)
本文將深入剖析一段基于 HTML5 Canvas 的代碼，該代碼實(shí)現(xiàn)了圖片的旋轉(zhuǎn)（90 度和 180 度）以及旋轉(zhuǎn)后圖片的下載功能,通過(guò)對(duì)代碼的解讀，我們可以學(xué)習(xí)到如何利用 Canvas API2025-06-18
HTML5 getUserMedia API網(wǎng)頁(yè)錄音實(shí)現(xiàn)指南示例小結(jié)
本教程將指導(dǎo)你如何利用這一API，結(jié)合Web Audio API，實(shí)現(xiàn)網(wǎng)頁(yè)錄音功能,從獲取音頻流到處理和保存錄音，整個(gè)過(guò)程將逐步詳解,此外，還討論了getUserMedia API的使用限制和最2025-06-16- HTML5的搜索框是一個(gè)強(qiáng)大的工具，能夠有效提升用戶體驗(yàn),通過(guò)結(jié)合自動(dòng)補(bǔ)全功能和適當(dāng)?shù)臉邮?，可以?chuàng)建出既美觀又實(shí)用的搜索界面,這篇文章給大家介紹HTML5 搜索框Search Box2025-06-13
- Checkbox是HTML5中非常重要的表單元素之一，通過(guò)合理使用其屬性和樣式自定義方法，可以為用戶提供豐富多樣的交互體驗(yàn)，這篇文章給大家介紹HTML5中Checkbox標(biāo)簽的深入全面解2025-06-13
HTML5無(wú)插件拖拽圖片上傳功能實(shí)現(xiàn)過(guò)程
本實(shí)例展示了一種基于HTML5技術(shù)的圖片上傳功能，無(wú)需外部插件即可通過(guò)拖放圖片實(shí)現(xiàn)上傳,涉及到HTML5的拖放API和File API，以及使用CSS來(lái)增強(qiáng)用戶界面的交互性和視覺(jué)反饋，2025-05-16HTML5 定位大全之相對(duì)定位、絕對(duì)定位和固定定位
在HTML5和CSS中，定位(positioning)是控制元素在頁(yè)面上位置的重要機(jī)制,主要有四種定位方式：靜態(tài)定位(static)、相對(duì)定位(relative)、絕對(duì)定位(absolute)和固定定位(fixed),2025-05-13- Microdata作為HTML5新增的一個(gè)特性，它允許開(kāi)發(fā)者在HTML文檔中添加更多的語(yǔ)義信息，以便于搜索引擎和瀏覽器更好地理解頁(yè)面內(nèi)容，本文將探討HTML5中Microdata的使用方法以及2025-04-21
在HTML語(yǔ)法中，表格主要通過(guò)< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過(guò)實(shí)例代碼講解HTML5表格語(yǔ)法格式，感興趣的朋友一起看看吧2025-04-21
