如何在canvas中使用環(huán)形倒計(jì)時(shí)組件

這篇文章將為大家詳細(xì)講解有關(guān)如何在canvas中使用環(huán)形倒計(jì)時(shí)組件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識有一定的了解。

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),札達(dá)企業(yè)網(wǎng)站建設(shè),札達(dá)品牌網(wǎng)站建設(shè),網(wǎng)站定制,札達(dá)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,札達(dá)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

Canvas環(huán)形倒計(jì)時(shí)組件

Canvas環(huán)形倒計(jì)時(shí)是基于Canvas實(shí)現(xiàn)的倒計(jì)時(shí)，建議于移動端使用

Canvas環(huán)形倒計(jì)時(shí) 下載地址

一、如何使用

1. html代碼

ID屬性可隨意取名

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

2. 引入process.js文件

頁面引用

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

3. 初始化參數(shù)

實(shí)例化即可

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

</script>

二、settings參數(shù)說明

以下參數(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)度條動畫顏色
            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>

/**
 * 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)度條動畫顏色
        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)度條動畫背景
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)度條動畫
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)度條動畫
Countdown.prototype.countdown = function () {
    let oldTime = +new Date();
    timer = setInterval(() => {
        let allMs = this.settings.time * 1000,// 如30*1000=30 000ms
            currentTime = +new Date();
        // 步長=（當(dāng)前的時(shí)間-過去的時(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;
    // 清除畫布
    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];
    }
}

四、附加——canvas準(zhǔn)備工作

canvas其實(shí)沒有那么玄乎，它不外乎是一個(gè)H5的標(biāo)簽，跟其它HTML標(biāo)簽如出一轍：

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

注意最好在一開始的時(shí)候就給canvas設(shè)置好其寬高（若不設(shè)定寬高，瀏覽器會默認(rèn)設(shè)置canvas大小為寬300、高100像素），而且不能使用css來設(shè)置（會被拉伸），建議直接寫于canvas標(biāo)簽內(nèi)部：

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

canvas本身沒有任何的繪圖能力，所有的繪圖工作都是通過js來實(shí)現(xiàn)的。通常我們在js通過getElementById來獲取要操作的canvas（這意味著得給canvas設(shè)個(gè)id）：

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

1.準(zhǔn)備好畫筆之后就可以開始繪圖了，環(huán)形其實(shí)就是半徑不同的同心圓，圓心坐標(biāo)是（size/2,size/2）, 先畫一個(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();