全国服务热线：4008-888-888

当前位置：建站首页 > 新闻资讯 > 技术知识 >

技术知识

canvas环状倒计时组件的示例编码

所属分类：技术知识发布时间：2021-02-23

本文详细介绍了canvas环状倒计时组件的示例编码，共享给大伙儿，实际以下：

实际效果以下图1：

Canvas环状倒计时组件

Canvas环状倒计时是根据Canvas完成的倒计时，提议于挪动端应用

Canvas环状倒计时 免费下载详细地址

1、怎样应用

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>

2、settings主要参数表明

下列主要参数非必选项，可依据实际要求配备

window.onload = function () {
        let ctd = new Countdown();
        ctd.init({
            id: "canvas",         // ID，canvas1定要有ID特性
            size: 130,            // 绘图圆形的最大规格，宽=高
            borderWidth: 4,       // 边框宽度
            borderColor:"#fff",   // 边框色调
            outerColor:"#fff",    // 最外层底圆色调
            scheduleColor:"#fff", // 进度条动漫色调
            fontColor: "#fff",    // 字体样式色调
            ringColor: "#ffc720", // 进度条环状色调
            innerColor: "#4e84e5",// 最内圆底色
            fontSize: 50,
            time: 5
        });
    };

3、示例编码

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF⑻">
    <title>Title</title>
    <style>
        body {
            background: #c2c1ce;
        }
        .container {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(⑸0%, ⑸0%);
            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() {
    // 设定默认设置主要参数
    this.settings = {
        id: "canvas",         // ID，canvas1定要有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 = ⑼0,
        endAng = ⑼0 + 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 ⑶, 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、额外——canvas提前准备工作中

canvas实际上沒有那末玄乎，它不外乎是1个H5的标识，跟其它HTML标识如出1辙：

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

留意最好是在1刚开始的情况下就给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）, 先画1个最大的白色情况底圆，半径是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.刚开始画第2个黄色打底圆，圆心也是(size/2，size/2),只是半径比白色底圆小4px，因此黄色底圆的半径是(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();

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

let deg = Math.PI / 180;
// beginPath()能够保证防护相对路径绘图实际效果的功效，避免以前的实际效果被污染。
ctx.beginPath();

// tcx.arc(圆心X,圆心Y,半径,起止角度,完毕角度,顺逆时针);
ctx.arc(size / 2, size / 2, size / 2⑵3, 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⑷, 0* deg, 360 * deg, false);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.closePath();

6.较为简易的美术绘画全过程进行了，接下来要将动漫和数据关系起来，运用当今的全新時间-最初的時间，再除总的時间能够获得1个重要的百分比，这个百分比决策数据的转变，和白色动漫圆绘图的角度。

Countdown.prototype.countdown = function () {
    let oldTime = +new Date();// 以往的時间：91
    timer = setInterval(() => {
        let currentTime = +new Date();// 如今的時间：93
        let allMs = this.settings.time * 1000;// 总時间豪秒数：如30*1000=30 000ms
        schedule = (currentTime - oldTime) / allMs;// 绘图百分比：（93⑴522136419291）/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 = ⑼0,// 刚开始角度
        endAng = ⑼0 + 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, ⑼0 * deg, (⑼0 + 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();
        
        // 统1画
        ctx.draw();
            
    },

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

查看更多

新闻资讯



Copyright © 2002-2020 如何制作小程序教程_招聘小程序_微信聊天小程序_制作微信小程序的教程_怎么创建微信小程序 版权所有 （网站地图）　粤ICP备10235580号

在线客服

关闭

客户服务热线
4008-888-888

点击这里给我发消息 在线客服

点击这里给我发消息 在线客服

在线客服