面向对象+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 ...
随机推荐
- Linux入门：增加用户，并赋予权限
一.增加用户 1.增加用户,并指定主目录 # useradd –d /usr/sam -m sam此命令创建了一个用户sam,其中-d和-m选项用来为登录名sam产生一个主目录/usr/sam(/us ...
- istio入门（00）istio的学习资源
官网:https://istio.io/ 理论知识: http://www.uml.org.cn/wfw/201710131.asp 环境搭建: http://dockone.io/article/2 ...
- Scala入门（1）Linux下Scala（2.12.1）安装
Scala入门(1)Linux下Scala(2.12.1)安装 一.文件准备 1.1 文件名称 scala-2.12.1.tgz 1.2 下载地址 http://www.scala-lang.org/ ...
- C# 读取网页JSON数据
场景描述: 公司和别的系统需要对接,现在对方提供一个网址,数据都是json字符串,我需要对json数据进行处理. 提供的json数据如下格式 一.读取网址中的json数据 public string ...
- python、java实现二叉树，细说二叉树添加节点、深度优先（先序、中序、后续）遍历 、广度优先 遍历算法
数据结构可以说是编程的内功心法,掌握好数据结构真的非常重要.目前基本上流行的数据结构都是c和c++版本的,我最近在学习python,尝试着用python实现了二叉树的基本操作.写下一篇博文,总结一下, ...
- python实现归并排序，归并排序的详细分析。
学习归并排序的过程是十分痛苦的.它并不常用,看起来时间复杂度好像是几种排序中最低的,比快排的时间复杂度还要低,但是它的执行速度不是最快的.很多朋友不理解时间复杂度低为什么运行速度不一定快,这个不清楚的 ...
- centos6.5中rpm包安装mysql5.7（初始化出错如何解决）
下载rpm包见:http://www.cnblogs.com/grey-wolf/p/7472680.html 1.rz上传到服务器,解压缩 rz [root@mini2 upload]# -.el6 ...
- 简单了解Spring的控制反转和依赖注入
浅谈控制反转(Inversion of Control,IOC) 我们首先先来了解一下控制二字,也就是在控制"正"转的情况下,在任何一个有请求作用的系统当中,至少需要有两个类互相配 ...
- 文本处理三剑客之sed
sed 1.简介 sed是一种流编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(patternspace),接着用sed命令处理缓冲区中的内 ...
- SpringBoot（四）：banner的控制
banner在springboot中是一个支持可配(banner的样式,banner的颜色,banner的内容).是否显示. 1)banner显示内容配置: 默认springboot如果在src/re ...