canvas環形倒數計時

譚瞎發表於2018-11-04

Canvas

效果如下圖一：

canvas環形倒數計時

Canvas環形倒數計時是基於Canvas實現的倒數計時，建議於移動端使用
Canvas環形倒數計時下載地址

一、如何使用

1. html程式碼

ID屬性可隨意取名

<canvas id="canvas"></canvas>
複製程式碼

2. 引入process.js檔案

頁面引用

<script src="js/process.js"></script>
複製程式碼

3. 初始化引數

例項化即可

<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>
複製程式碼

/**
 * 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];
    }
}
複製程式碼

四、附加——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");
複製程式碼

1.準備好畫筆之後就可以開始繪圖了，環形其實就是半徑不同的同心圓，圓心座標是（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();

複製程式碼

2.開始畫第二個黃色打底圓，圓心也是(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();

複製程式碼

3.開始畫藍色內圓，同理圓心為(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();
複製程式碼

4.繪製文字，垂直居中

ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "#fff";
// ctx.fillText(文字，相對畫布的X座標，相對畫布的Y座標)
ctx.fillText(30, size / 2, size / 2);
複製程式碼

5.如何製作動畫？其實也是畫白色圓的過程，慢慢的覆蓋黃色進度條的過程，那麼先把白色的圓畫出來出來，這個時候藍圓就會被白色的動畫圓給蓋住，這個時候最後畫藍圓就好了。

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.比較簡單的繪畫過程完成了，接下來要將動畫和數字關聯起來，利用當前的最新時間-最開始的時間，再除總的時間可以得到一個關鍵的百分比，這個百分比決定數字的變化，以及白色動畫圓繪製的角度。

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();
};
複製程式碼

程式導向版本

    /**
    * 進度條動畫
    */
    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環形倒數計時元件
2018-11-13
Canvas元件
直播網站原始碼，Canvas實現圓形時間倒數計時進度條
2023-11-02
網站原始碼Canvas
JavaScript倒數計時
2019-02-28
JavaScript
js——倒數計時
2016-06-29
JS
JS倒數計時
2013-04-23
JS
Kookjs 倒數計時
2009-10-14
JS
倒數計時34天
2024-03-05
canvas環形資料效果
2018-02-04
Canvas
laravel 9 倒數計時了
2021-12-30
Laravel
小程式倒數計時深究
2018-12-27
倒數計時門栓（CountDownLatch）
2017-11-20
CountDownLatch
Android閃屏頁圓形倒數計時進度條實現
2017-12-14
Android
js自動倒數計時程式碼，倒數計時完畢時自動停止迴圈
2024-07-19
JS
js倒數計時實現傳送驗證碼倒數計時60s
2018-01-20
JS
Flutter倒數計時/計時器的實現
2019-04-10
Flutter
canvas環形進度條效果
2018-07-09
Canvas
線上直播系統原始碼，預設倒數計時，自定義輸入時間倒數計時
2023-05-04
原始碼
視訊直播系統原始碼，倒數計時顯示，商品秒殺倒數計時
2022-06-27
原始碼
canvas圓形時鐘效果
2018-07-16
Canvas
JavaScript 年月日倒數計時
2019-12-10
JavaScript
js cookie 頁面倒數計時
2019-02-16
JSCookie
Android中handler倒數計時
2019-02-12
Android
jQuery 倒數計時效果詳解
2018-11-28
jQuery
jquery 60s倒數計時
2018-07-13
jQuery
案例：倒數計時 js小案例
2020-12-09
JS
js實現活動倒數計時
2018-05-30
JS
js 活動倒數計時詳解
2018-04-20
JS
Redux教程3：新增倒數計時
2016-01-07
Redux
js實現指定時間倒數計時
2020-09-27
JS
layui table tr a標籤倒數計時操作重新整理以後繼續倒數計時
2024-05-21
UI
Android 實現計數或者倒數計時計時器用法Demo
2014-01-08
Android
win10 自帶倒數計時如何設定_win10開啟計時器倒數計時的方法
2020-05-28
Win10
傳送簡訊驗證，後按鈕倒數計時，防止重新整理倒數計時失效
2019-02-16
JavaScript 倒數計時關閉頁面
2020-02-23
JavaScript
JavaScript 倒數計時60秒程式碼
2019-12-10
JavaScript
JavaScript 倒數計時踩坑集錦
2019-03-04
JavaScript
jquery實現60秒倒數計時
2018-08-21
jQuery
用宏實現PPT倒數計時
2017-07-05

canvas環形倒數計時

canvas環形倒數計時

一、如何使用

1. html程式碼

2. 引入process.js檔案

3. 初始化引數

二、settings引數說明

三、示例程式碼

四、附加——canvas準備工作

程式導向版本

相關文章