面向对象+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 ...
随机推荐
- 怎样使用下载的bootstrap模板？
核心文件bootstarp.css和bootstarp.js导入到页面,然后看着官网的代码复制进去用就可以了.网上是有不少教程的.实际上就是加class 属性 ,如:http://www.runoob ...
- 解决编写的 html 乱码问题
- SpringCloud的EurekaClient ： 客户端应用访问注册的微服务（无断路器场景）
演示客户端应用如何访问注册在EurekaServer里的微服务 一.概念和定义 采用Ribbon或Feign方式访问注册到EurekaServer中的微服务.1.Ribbon实现了客户端负载均衡,2. ...
- Linux之Shell命令
开始接触Linux命令行,学习Linux文件系统导航以及创建.删除.处理文件所需的命令. 注:文末有福利! 几个快捷键: Linux发行版通常使用Ctrl+Alt组合键配合F1~F7进入要使用的控制 ...
- EasyUI easyui-combobox实现数据联动
实现效果:当用户选择了调查地区以后,只显示当前选择地区的频道,如果没有选择地区,那么频道下拉列表是空的.实现效果,如下
- leetcode算法： Find Bottom Left Tree Value
leetcode算法: Find Bottom Left Tree ValueGiven a binary tree, find the leftmost value in the last row ...
- linux环境安装mysql，以及mysql基本的终端操作命令
linux环境下安装mysql服务器.客户端mysql简单的终端操作指令(使用数据库.简单的增删改查和备份恢复)1 SQL: Structured Query Language 结构化查询语言. 运用 ...
- 初识JavaScript闭包
一个问题引发的思考 在我学习javascript的事件时,有一个小任务是使用JS来实现 li 列表项在鼠标悬浮时会有背景阴影的动态效果,很自然想到用for 来为每个列表项添加onmouseover 和 ...
- [Debug]测试环境Giraffe无法正确登录
BUG描述: 在测试环境192.168.2.72上的giraffe无法正确登录,输入正确的用户名.密码,点击登录无反应,输入错误的用户名密码会报错 原因: 2.72安装giraffe的磁盘空间已满,导 ...
- [转]XHR简介
在XHR诞生前,网页要获取客户端和服务器的任何状态更新,都需要刷新一次,在XHR诞生后就可以完全通过JS代码异步实现这一过程.XHR的诞生也使最初的网页制作转换为开发交互应用,拉开了WEB2.0的 ...