面向对象+canvas 倒计时

　　效果参照网上的，用面向对象改写了一下，只写了自己需要的部分。

1、效果：

实现：

//html
<canvas id="canvas" width="800px" height="500px"></canvas>

//js
;(function(win, undefined) {
    function AtomCountdown(num) {
        this.WINDOW_WIDTH = 0; //可视
        this.WINDOW_HEIGHT = 0;
        this.RADIUS = 10; //小球半径
        this.numArr = [
            [
                [0, 0, 1, 1, 1, 0, 0],
                [0, 1, 1, 0, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 0, 1, 1, 0],
                [0, 0, 1, 1, 1, 0, 0]
            ], //0
            [
                [0, 0, 0, 1, 1, 0, 0],
                [0, 1, 1, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [1, 1, 1, 1, 1, 1, 1]
            ], //1
            [
                [0, 1, 1, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 1, 1, 0, 0, 0, 0],
                [1, 1, 0, 0, 0, 0, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 1, 1, 1, 1, 1]
            ], //2
            [
                [1, 1, 1, 1, 1, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 1, 1, 1, 0, 0],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0]
            ], //3
            [
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 1, 0],
                [0, 0, 1, 1, 1, 1, 0],
                [0, 1, 1, 0, 1, 1, 0],
                [1, 1, 0, 0, 1, 1, 0],
                [1, 1, 1, 1, 1, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 1, 1]
            ], //4
            [
                [1, 1, 1, 1, 1, 1, 1],
                [1, 1, 0, 0, 0, 0, 0],
                [1, 1, 0, 0, 0, 0, 0],
                [1, 1, 1, 1, 1, 1, 0],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0]
            ], //5
            [
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 1, 1, 0, 0, 0, 0],
                [1, 1, 0, 0, 0, 0, 0],
                [1, 1, 0, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0]
            ], //6
            [
                [1, 1, 1, 1, 1, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 0, 1, 1, 0, 0, 0],
                [0, 0, 1, 1, 0, 0, 0]
            ], //7
            [
                [0, 1, 1, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 1, 1, 0]
            ], //8
            [
                [0, 1, 1, 1, 1, 1, 0],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [1, 1, 0, 0, 0, 1, 1],
                [0, 1, 1, 1, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 0, 1, 1],
                [0, 0, 0, 0, 1, 1, 0],
                [0, 0, 0, 1, 1, 0, 0],
                [0, 1, 1, 0, 0, 0, 0]
            ] //9
        ];
        this.balls = [];
        this.colors = ["#CC9933", "#FF9900", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33"]; //小球颜色
        this.context = ‘‘;
        this.pos_left = 0;
        this.pos_top = 0;
        this.timer1 = null;
        this.timer2 = null;
        this.num = num; //倒计时 0-9
        this.init(); //初始化
    }
    AtomCountdown.prototype = {
        constructor: AtomCountdown,
        init: function() {
            this.WINDOW_WIDTH = document.documentElement.clientWidth;
            this.WINDOW_HEIGHT = document.documentElement.clientHeight;

            var canvas = document.getElementById(‘canvas‘);
            this.context = canvas.getContext("2d");
            this.pos_left = canvas.width / 2 - 100;
            this.pos_top = canvas.height / 2 - 100;

            var timer1 = setInterval(
                function() {
                    this.render(this.context, this.pos_left, this.pos_top);
                    this.updateBalls();
                }.bind(this), 100);

            var timer2 = setInterval(function() {
                if (this.num >= 0) {
                    this.addBalls(this.pos_left, this.pos_top, this.num);
                    this.num--;
                }
                if (this.num < 0) {
                    clearInterval(timer2);
                    clearInterval(timer1);
                    this.closeAll();
                }
            }.bind(this), 1000);
        },
        updateBalls: function() {
            for (var i = 0; i < this.balls.length; i++) {

                this.balls[i].x += this.balls[i].vx;

                var c = 1.0;
                if (this.balls[i].y + this.RADIUS + this.balls[i].vy >= this.WINDOW_HEIGHT) {
                    c = (this.WINDOW_HEIGHT - (this.balls[i].y + this.RADIUS)) / this.balls[i].vy;
                }

                this.balls[i].y += this.balls[i].vy;
                this.balls[i].vy += c * this.balls[i].g;;

                if (this.balls[i].y >= this.WINDOW_HEIGHT - this.RADIUS) {
                    this.balls[i].y = this.WINDOW_HEIGHT - this.RADIUS;
                    this.balls[i].vy = -Math.abs(this.balls[i].vy);
                }
            }

            var cnt = 0
            for (var i = 0; i < this.balls.length; i++) {
                if (this.balls[i].x + this.RADIUS > 0 && this.balls[i].x - this.RADIUS < this.WINDOW_WIDTH) {
                    this.balls[cnt++] = this.balls[i];
                }
            }

            while (this.balls.length > cnt) {
                this.balls.pop();
            }
        },
        addBalls: function(x, y, num) {
            for (var i = 0; i < this.numArr[num].length; i++)
                for (var j = 0; j < this.numArr[num][i].length; j++)
                    if (this.numArr[num][i][j] == 1) {
                        var aBall = {
                            x: x + j * 2 * this.RADIUS + this.RADIUS,
                            y: y + i * 2 * this.RADIUS + this.RADIUS,
                            g: 2 + Math.random(),
                            vx: Math.pow(-1, Math.ceil(Math.random() * 1000)) * 5,
                            vy: -10,
                            color: this.colors[Math.floor(Math.random() * this.colors.length)]
                        }

                        this.balls.push(aBall)
                    }
        },
        render: function(cxt, left, top) {

            cxt.clearRect(0, 0, this.WINDOW_WIDTH, this.WINDOW_HEIGHT);

            //num>=0时候，初始化数字
            this.num >= 0 && this.renderInit(this.pos_left, this.pos_top, this.num, this.context);

            //绘制爆炸的小球
            for (var i = 0; i < this.balls.length; i++) {
                cxt.fillStyle = this.balls[i].color;
                cxt.beginPath();
                cxt.arc(this.balls[i].x, this.balls[i].y, this.RADIUS * 0.8, 0, 2 * Math.PI, true);
                cxt.closePath();

                cxt.fill();
            }
        },
        //绘制初始换的数字
        renderInit: function(x, y, num, cxt) {
            cxt.fillStyle = ‘blue‘;
            for (var i = 0; i < this.numArr[num].length; i++)
                for (var j = 0; j < this.numArr[num][i].length; j++)
                    if (this.numArr[num][i][j] == 1) {
                        cxt.beginPath();
                        cxt.arc(x + j * 2 * (this.RADIUS + 1) + (this.RADIUS + 1), y + i * 2 * (this.RADIUS + 1) + (this.RADIUS + 1), this.RADIUS, 0, 2 * Math.PI)
                        cxt.closePath()
                        cxt.fill()
                    }
        },
        closeAll: function() {
            this.context.clearRect(0, 0, this.WINDOW_WIDTH, this.WINDOW_HEIGHT);
        }
    }
    win.AtomCountdown = AtomCountdown;
})(window)

3、usage

//实例  new AtomCountdown(9)

时间： 2024-10-18 13:21:26

面向对象+canvas 倒计时的相关文章

canvas制作倒计时炫丽效果

<!DOCTYPE html> <head> <title>canvas倒计时</title> <style> .canvas{ display: block; border: 1px solid #000; margin: 50px auto; } </style> </head> <body> <canvas class="canvas" id="canvas"

微信小程序整理下载 [小程序源码]微信小程序-车源宝微信版 [小程序源码]小程序-微赞社区(论坛demo) [小程序源码]微信小程序-收支账单 [小程序工具]微信小程序-日历 [小程序源码]小程序-在线聊天功能 [小程序源码]微信小程序-大好商城(新增功能天气查询和2048游戏) [小程序源码]微信小程序-查询号码归属地 [小程序源码]微信小程序-备忘录2 [小程序源码]微信小程序-QQ音乐 [小程序源码]小程序-货币汇率 [小程序源码]微信小程序-大学图书馆 [小程序源码]小程序-积分商城 [

JavaScript（三）

一.条件分支语句条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力语法能够书写所有的条件分支语句.也就是说,一会儿学switch case语句,switch case语句能干的,if else语句一定也能干. 标准的完整结构: if(){ }else if(){ }else if(){ }else{ } else只能有一个,并且一定要放在最后.表示所有的分支都不满足的

封装用canvas绘制直线的函数--面向对象

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用面向对象的思想封装在canvas绘制直线的函数</title> 6 </head> 7 <body> 8 <canvas id="cv"></canvas> 9 &

canvas基础绘制-绚丽倒计时

效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ball</title> <script src="digit_1.js"></script> <script src="countdown.js"></

HTML5 canvas绘制倒计时+环形进度条

需求: 1.页面在进入时后台会提供一个固定时间和固定百分比,例如:18小时16分30秒,25%2.页面要求在进入时,有环形进度条从0推进到25%的效果,进度条旁的显示进度的黄色方块要始终保持跟随进度条最前方如图3.环形进度条中间计时器,要从获取到具体时间后开始倒计时设计图: JS代码如下: //补零function setDigit(num, n){ var str=''+num; if(str.length<n) { str='0'+str; } return str;}//设定时间fun

canvas：制作一个很炫的倒计时

canvas:制作一个很炫的倒计时 1.目的: 很多网站都会用到倒计时,如:天猫等.本文讲述的是一个用canvas实现的绚丽的倒计时. 2.原理: canvas标签类似于html的其他标签,<canvas></canvas>,canvas就相当于一张画布,可以在上面绘制各种自己想要的效果. 数字的点阵实现,利用0和1,0标示不填充,1表示用绿色小球填充. <canvas id="canvas" width="1200&qu

canvas绘图详解-03-绚丽的倒计时效果

制作一个上面这种倒计时效果,只截图了三秒此效果源码github连接:https://github.com/wufangfang0614/fanggit/tree/master/canvas/%E5%80%92%E8%AE%A1%E6%97%B6%E6%97%B6%E9%92%9F 首先分析这个得有一定的数学知识和物理知识(看这个课程的时候,心想要是让我自己想明白这个过程我可弄不明白.)

canvas，制作炫酷的时钟和倒计时

html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #a5b2b9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #4a8a01 } p.p