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"></canvas>
<script>
var digit = [
[
[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,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]
], //
[
[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]
], //
[
[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]
], //
[
[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],
[1,1,0,0,1,1,0],
[0,0,0,1,1,1,1]
], //
[
[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]
], //
[
[0,0,0,0,1,1,1],
[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]
], //
[
[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]
], //
[
[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]
], //
[
[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]
], //
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
] //: ]; var WINDOW_HEIGHT = 468;
var WINDOW_WIDTH = 1024;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30; //const endTime = new Date(2017,1,03,28,18,09);
var endTime = new Date();
endTime.setTime(endTime.getTime()+3600*1000);
var curShowTimeSeconds = 0; var balls = [];
var colors = ['#33B5E5','#0099CC','#AA66CC','#9933CC','#99CC00','#669900','#FF8800','FF8888','#CC0000']; window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.height = WINDOW_HEIGHT;
canvas.width = WINDOW_WIDTH; curShowTimeSeconds = getCurrentShowTimeSeconds(); setInterval(function(){
render(cxt);
update();
},50);
}
function getCurrentShowTimeSeconds(){
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000); return ret >=0? ret : 0;
}
function update(){ var nextShowTimeSeconds = getCurrentShowTimeSeconds(); var nextHours = parseInt(nextShowTimeSeconds / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds -nextHours*3600)/ 60);
var nextSeconds = nextShowTimeSeconds % 60; var curHours = parseInt(curShowTimeSeconds / 3600);
var curMinutes = parseInt((curShowTimeSeconds -curHours*3600)/ 60);
var curSeconds = curShowTimeSeconds% 60; if(nextSeconds != curSeconds){ if(parseInt(curHours/10) != parseInt(nextHours/10)){
addBalls(MARGIN_LEFT + 0, MARGIN_TOP, parseInt(curHours/10));
}
if(parseInt(curHours%10) != parseInt(nextHours%10)){
addBalls(MARGIN_LEFT + 15*(RADIUS+1), MARGIN_TOP, parseInt(curHours/10));
}
if(parseInt(curMinutes/10) != parseInt(nextMinutes/10)){
addBalls(MARGIN_LEFT + 39*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes/10));
}
if(parseInt(curMinutes%10) != parseInt(nextMinutes%10)){
addBalls(MARGIN_LEFT + 54*(RADIUS+1), MARGIN_TOP, parseInt(curMinutes%10));
}
if(parseInt(curSeconds/10) != parseInt(nextSeconds/10)){
addBalls(MARGIN_LEFT + 78*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds/10));
}
if(parseInt(curSeconds%10) != parseInt(nextSeconds%10)){
addBalls(MARGIN_LEFT + 93*(RADIUS+1), MARGIN_TOP, parseInt(curSeconds%10));
} curShowTimeSeconds = nextShowTimeSeconds;
} updateBalls();
}
function updateBalls(){
for(var i= 0; i< balls.length; i++){
balls[i].x += balls[i].vx;
balls[i].y += balls[i].vy;
balls[i].vy += balls[i].g; if(balls[i].y >= canvas.height -RADIUS){ balls[i].y = canvas.height - RADIUS;
balls[i].vy = -balls[i].vy*0.65; //加一个摩擦力系数
}
} var cnt = 0;
for(var i= 0; i< balls.length; i++){
if(balls[i].x + RADIUS > 0 && balls[i].x - RADIUS < WINDOW_WIDTH){
balls[cnt++] = balls[i];
}
}
while(balls.length > Math.min(300,cnt)){
balls.pop();
}
}
function addBalls(x, y, num){
for(var i=0; i<digit[num].length; i++){
for(var j=0; j<digit[num][i].length; j++){
if(digit[num][i][j] == 1){
var aBall = {
x: x+j*2*(RADIUS+1) +(RADIUS+1),
y: y+i*2*(RADIUS+1) +(RADIUS+1),
g: 1.5+Math.random(),
vx: Math.pow(-1, Math.ceil(Math.random()*1000))*4,
vy: -5,
color: colors[Math.floor(Math.random()*colors.length)]
}; balls.push(aBall);
}
} }
}
function render(cxt){ cxt.clearRect(0,0, WINDOW_WIDTH, WINDOW_HEIGHT); var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds -hours*3600)/ 60);
var seconds = curShowTimeSeconds% 60; renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt);
renderDigit(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), cxt);
renderDigit(MARGIN_LEFT+30*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), cxt);
renderDigit(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), cxt);
renderDigit(MARGIN_LEFT+69*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), cxt);
renderDigit(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), cxt); for(var i=0; i < balls.length; i++){
cxt.fillStyle = balls[i].color; cxt.beginPath();
cxt.arc(balls[i].x, balls[i].y, RADIUS, 0, 2*Math.PI, true);
cxt.closePath(); cxt.fill();
}
}
function renderDigit(x,y, num, cxt){ cxt.fillStyle = 'rgb(0,102,153)'; for(var i =0; i<digit[num].length; i++){
for(var j =0; j<digit[num][i].length; j++){
if(digit[num][i][j] == 1){
cxt.beginPath();
cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1), y+i*2*(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
</script> </body>
</html>
<!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"></canvas> <script>
var ball = {x: 512, y:100, r:20, g:2, vx: -1, vy: 0, color: '#005588'};
window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.width = 1024;
canvas.height = 468; setInterval(function(){
render(cxt);
update();
},50);
}
function update(){
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g;
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,canvas.height); cxt.fillStyle = ball.color;
cxt.beginPath();
cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
cxt.closePath(); cxt.fill();
}
</script>
</body>
</html>
<!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"></canvas>
<script>
var digit = [
[
[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,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]
], //
[
[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]
], //
[
[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]
], //
[
[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],
[1,1,0,0,1,1,0],
[0,0,0,1,1,1,1]
], //
[
[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]
], //
[
[0,0,0,0,1,1,1],
[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]
], //
[
[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]
], //
[
[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]
], //
[
[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]
], //
[
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
[0,1,1,0],
[0,1,1,0],
[0,0,0,0],
[0,0,0,0],
] //: ]; var WINDOW_HEIGHT = 468;
var WINDOW_WIDTH = 1024;
var RADIUS = 8;
var MARGIN_TOP = 60;
var MARGIN_LEFT = 30; const endTime = new Date(2017,1,03,28,18,09);
var curShowTimeSeconds = 0; window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.height = WINDOW_HEIGHT;
canvas.width = WINDOW_WIDTH; curShowTimeSeconds = getCurrentShowTimeSeconds(); setInterval(function(){
render(cxt);
update();
},50);
}
function getCurrentShowTimeSeconds(){
var curTime = new Date();
var ret = endTime.getTime() - curTime.getTime();
ret = Math.round(ret/1000); return ret >=0? ret : 0;
}
function update(){ var nextShowTimeSeconds = getCurrentShowTimeSeconds(); var nextHours = parseInt(nextShowTimeSeconds / 3600);
var nextMinutes = parseInt((nextShowTimeSeconds -nextHours*3600)/ 60);
var nextSeconds = nextShowTimeSeconds % 60; var curHours = parseInt(curShowTimeSeconds / 3600);
var curMinutes = parseInt((curShowTimeSeconds -curHours*3600)/ 60);
var curSeconds = curShowTimeSeconds% 60; if(nextSeconds != curSeconds){ curShowTimeSeconds = nextShowTimeSeconds;
}
}
function render(cxt){ cxt.clearRect(0,0, WINDOW_WIDTH, WINDOW_HEIGHT); var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds -hours*3600)/ 60);
var seconds = curShowTimeSeconds% 60; renderDigit(MARGIN_LEFT, MARGIN_TOP, parseInt(hours/10), cxt);
renderDigit(MARGIN_LEFT+15*(RADIUS+1), MARGIN_TOP, parseInt(hours%10), cxt);
renderDigit(MARGIN_LEFT+30*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+39*(RADIUS+1), MARGIN_TOP, parseInt(minutes/10), cxt);
renderDigit(MARGIN_LEFT+54*(RADIUS+1), MARGIN_TOP, parseInt(minutes%10), cxt);
renderDigit(MARGIN_LEFT+69*(RADIUS+1), MARGIN_TOP, 10, cxt);
renderDigit(MARGIN_LEFT+78*(RADIUS+1), MARGIN_TOP, parseInt(seconds/10), cxt);
renderDigit(MARGIN_LEFT+93*(RADIUS+1), MARGIN_TOP, parseInt(seconds%10), cxt);
}
function renderDigit(x,y, num, cxt){ cxt.fillStyle = 'rgb(0,102,153)'; for(var i =0; i<digit[num].length; i++){
for(var j =0; j<digit[num][i].length; j++){
if(digit[num][i][j] == 1){
cxt.beginPath();
cxt.arc( x+j*2*(RADIUS+1)+(RADIUS+1), y+i*2*(RADIUS+1)+(RADIUS+1), RADIUS, 0, 2*Math.PI);
cxt.closePath();
cxt.fill();
}
}
}
}
</script>
<script>
var ball = {x: 512, y:100, r:20, g:2, vx: -1, vy: 0, color: '#005588'};
window.onload = function(){
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d'); canvas.width = 1024;
canvas.height = 468; setInterval(function(){
render(cxt);
update();
},50);
}
function update(){
ball.x += ball.vx;
ball.y += ball.vy;
ball.vy += ball.g; if(ball.y >= canvas.height -ball.r){ ball.y = canvas.height - ball.r;
ball.vy = -ball.vy*0.6; //加一个摩擦力系数
}
}
function render(cxt){
cxt.clearRect(0,0,cxt.canvas.width,canvas.height); cxt.fillStyle = ball.color;
cxt.beginPath();
cxt.arc(ball.x, ball.y, ball.r, 0, 2*Math.PI);
cxt.closePath(); cxt.fill();
}
</script>
</body>
</html>
canvas制作倒计时炫丽效果的更多相关文章
- 酷！使用 jQuery & Canvas 制作相机快门效果
在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...
- 如何使用 HTML5 Canvas 制作水波纹效果
今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...
- canvas制作倒计时效果
- canvas制作的烟花效果
最近感觉canvas挺有意思的,在业余时间没事研究了一下,参考过网上一些思路,话不多说,开始啦. github地址:https://github.com/aWhiteBear/fireworks 演示 ...
- canvas实现倒计时效果示例（vue组件内编写）
前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...
- html5 canvas 实现倒计时 功能
function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...
- 用Canvas制作简单的画图工具
今天用Canvas制作了一个画图工具,非常简单,功能也不是很多,主要有背景网格,画线,画圆,画矩形和画圆角矩形,也用到了canvas的一些基本知识,在这里一一列举. 1.线段的绘制: 如何绘制真正的1 ...
- WPF设置VistualBrush的Visual属性制作图片放大镜效果
原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果 效果图片:原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// ...
- H5上传图片并使用canvas制作海报
马上就要"十一"国庆节了,又恰逢公司已经三周岁了,所以市场部和产品共同策划了一个"正青春,共成长"的主题代言活动,准备在国庆节以及中秋节期间让公司员工和用户为公 ...
随机推荐
- linux中断和异常睡眠问题
中断和异常: 中断只代表异步中断,异常代表同步中断,这样系统调用是异常处理,不是中断处理. 这里异常处理是可以休眠block的,因为异常处理所需的数据是存储在异常栈中,而每个进程都有一个异常栈,所以异 ...
- shared_ptr 和auto_ptr智能指针
shared_ptr:计数的智能指针 它是一个包装了new操作符在堆上分配的动态对象,但它实现的是引用计数型的智能指针 ,可以被自由地拷贝和赋值,在任意的地方共享它,当没有代码使用(引用计数为0)它时 ...
- powdesigner建表
默认打开powerDesigner时,创建table对应的自动生成sql语句没有注释. 方法1.comment注释信息 在Columns标签下,一排按钮中找到倒数第2个按钮:Customize Col ...
- ul li做横向导航栏例子
/* ul li以横排显示 */ /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ margin: ...
- 项目中遇到的问题：前台 disabled 与 后台disabled
TPRI项目流程,点[保存],“人员”服务器端控件,如果在前台disabled设置,则值会丢失:在后台设置disabled就可以.
- Go语言基础之18--接口编程
一.接口介绍和定义 1.1 接口定义了一个对象的行为规范 A. 只定义规范,不实现 B. 具体的对象需要实现规范的细节 葵花宝典: 接口就是一层封装,1个例子,封装一个返还浏览器内容的接口.为什么不直 ...
- ZPL打印机公用代码
using System;using System.Collections.Generic;using System.Linq;using System.Web; using System.Text; ...
- javascript中对两个对象进行排序 和 java中的两个对象排序
javascript中的对象数组排序 一 定义一个对象数组 var text = [{"name":"张","age":24},{" ...
- 4.centos7 docker 安装
参考这个文档进行安装docker: http://www.runoob.com/docker/centos-docker-install.html 开机启动 systemctl enable dock ...
- vue-cli构建项目添加网站ico的logo
1.网上找一个把图片改成ico格式的网站,把logo改成ico格式,命名favicon.ico 2.将favicon.ico放入static目录 3.在index.html文件中引入 <link ...