面向对象+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)
面向对象+canvas 倒计时的更多相关文章
- canvas制作倒计时炫丽效果
<!DOCTYPE html> <head> <title>canvas倒计时</title> <style> .canvas{ displ ...
- 微信小游戏开发Canvas资源汇总
Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成 微信小程序学习用完整dem ...
- 封装 用canvas绘制直线的函数--面向对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5 canvas 实现倒计时 功能
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...
- canvas学习和面向对象(二)
Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...
- canvas，制作炫酷的时钟和倒计时
html部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 30.0px Consolas; color: #2b7ec3 } p.p2 { margin ...
- 更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
- 从canvas理解面向对象
前言 据说在编程语言的发展过程中,面向对象语言的出现是为了解决GUI编程的问题而出现的.计算机一开始是用纸带,命令行等来和人进行交互,而图形界面的出现是一次重大的改进,使普通人很容易就能使用计算机. ...
- [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果
效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...
随机推荐
- 隐藏Easy UI 中parent.$.modalDialog 的button
例子: buttons : [ { text : '关闭', handler : function() { parent.$.modalDialog.handler.dialog('close'); ...
- 获取apk项目的MD5值和SHA1值
一些可说可不说的话: * 以前有一个更简单的方法,在as的右边工具栏的 gradle 面板中可以很方便的获取到: * 上次用也是在2年前,时间长了给忘记了,不过我记得我当时写了笔记,这会笔记不在身边, ...
- Oracle复合B*tree索引branch block内是否包含非先导列键值？
好久不碰数据库底层细节的东西,前几天,一个小家伙跑来找我,非要说复合b*tree index branch block中只包含先导列键值信息,并不包含非先导列键值信息,而且还dump了branch b ...
- VMware虚拟机安装
学习Linux系统最好的方式就是在自己的虚拟机上安装Linux:接下来就给大家简单介绍一下VMware虚拟机的安装以及Linux的安装:VMware虚拟机只是为了更好的学习Linux: ...
- ActiveMQ学习系列（二）----生产者客户端（java）
上文主要简单地将activeMq搭建了起来,并且可以用web console去登录查看相关的后台功能. 本文将学习如何用java语言实现一个生产者客户端,主要参考了以下链接: http://activ ...
- 复习HTML+CSS（4）
n HTML颜色表示 网页中的颜色有三种表示方法 颜色单词:blue.green.red.yellow 10进制表示:rgb(255,0,0).rgb(0,255,0).rgb(0,0,255) 1 ...
- git初试
在gitLab上新建一个项目,creat项目文件之后,进入到项目的路径之后,复制命令git clone ‘git@gitlab.touzila.com:xiacaixiang/gitgitTest1. ...
- python网络编程基础（一）
一.C/S架构 客户端/服务端架构 二.OSI七层架构 七层模型,亦称OSI(Open System Interconnection)参考模型,是参考模型是国际标准化组织(ISO)制定的一个用于计算机 ...
- 实现Winform端窗体关闭后刷新html网页内容
一.首先要知道刷新网页的路径: frmPointEasyToBeat fpetBeat = new frmPointEasyToBeat(bookNoteId, userInfo.UserId); f ...
- easygui的导入方式
方法一: >>> import easygui >>> easygui.msgbox('hello') 方法二: >>> from easygui ...