前言

想要在自己做的网页中,加入canvas动画效果,但是发现模板各种调整不好,觉得还是要对canvas有所了解,才可以让自己的网页变得狂拽炫酷吊炸天!

一、绘制基础

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8 <canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto;">
9 </canvas>
10
11 <script>
12 window.onload=function (ev) {
13 var canvas=document.getElementById('canvas');
14 //画布的长宽,没有单位的
15 canvas.width=1024;
16 canvas.height=600;
17 var context=canvas.getContext('2d');
18 //使用context绘制,画图之前的配置
19
20
21 //1.绘制折线图形
22 context.beginPath();
23 context.moveTo(100,100);
24 context.lineTo(500,500);
25 context.lineTo(100,500);
26 context.lineTo(100,100);
27 context.closePath();
28 //图线的状态,如果用context.beginPath();.... context.closePath();包住,才只对下面最近的一个 context.stroke();(画线)命令起作用,不然就对所有 context.stroke();起作用
29
30 context.lineWidth=5;//画线的粗细
31 context.strokeStyle='#005588';
32 context.stroke();
33
34 context.beginPath();
35 context.moveTo(200,100);
36 context.lineTo(600,500);
37 context.closePath();
38
39 context.strokeStyle='black'; //画线的颜色
40 context.stroke();
41
42
43 }
44 </script>
45 </body>
46 </html>

图线 Code

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto;">
</canvas> <script>
window.onload=function (ev) {
var canvas=document.getElementById('canvas');
canvas.width=1024;
canvas.height=600;
var context=canvas.getContext('2d');
//使用context绘制 context.lineWidth=5;
context.strokeStyle="#005588"; for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
context.closePath(); context.stroke()
} for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
// context.closePath(); context.stroke()
} for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);
context.closePath(); context.stroke()
} for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,420,40,0,2*Math.PI*(i+1)/10,true);
// context.closePath(); context.stroke()
} context.fillStyle="#005588";
for(var i=0;i<10;i++){
context.beginPath();
context.arc(50+i*100,540,40,0,2*Math.PI*(i+1)/10);
context.closePath(); context.fill()
} }
</script>
</body>
</html>

圆弧Code

二、倒计时电子钟的实现

新建两个js文件:digit.js 存放一个三维数组,countdown.js实现时钟效果

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto;">
</canvas> <script src="digit.js"></script>
<script src="countdown.js"></script> </body>
</html>
 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,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
[
[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]
]//:
];

digit.js

 var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=600;
var RADIUS=8;
var MARGIN_TOP=60;
var MARGIN_LIFT=30;
const endTime=new Date("2018/3/20,18:47:52");//js中的月份是从0-11,如果要表示7月,则用6表示,const代表常量
var curShowTimeSeconds=0; window.onload=function () { var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d'); canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT; curShowTimeSeconds=getCurrentShowTimeSeconds();
render(context);
}; function getCurrentShowTimeSeconds() {
var curTime=new Date();
var ret=endTime.getTime()-curTime.getTime();
ret=Math.round(ret/1000);
return ret>=0?ret:0;
} function render(cxt) {
var hours=parseInt(curShowTimeSeconds/3600);
var minutes=parseInt((curShowTimeSeconds-hours * 3600)/60);
var seconds=curShowTimeSeconds%60; renderDigit(MARGIN_LIFT,MARGIN_TOP,parseInt(hours/10),cxt);
renderDigit(MARGIN_LIFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
renderDigit(MARGIN_LIFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
renderDigit(MARGIN_LIFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
renderDigit(MARGIN_LIFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
renderDigit(MARGIN_LIFT+69*(RADIUS+1),MARGIN_TOP,parseInt(10),cxt);
renderDigit(MARGIN_LIFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
renderDigit(MARGIN_LIFT+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()
}
}

countdown.js

注意:数组阵列中,只能从0-9,如果超过10,就会报错,换言之,定义的到期时间距离程序当前时间不能超过100个小时,也就是四天。

三、倒计时电子钟的实现

1.实现倒计时效果,修改countdown.js

 var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=600;
var RADIUS=8;
var MARGIN_TOP=60;
var MARGIN_LIFT=30;
const endTime=new Date("2018/3/20,18:47:52");//js中的月份是从0-11,如果要表示7月,则用6表示,const代表常量
var curShowTimeSeconds=0; window.onload=function () { var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d'); canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT; curShowTimeSeconds=getCurrentShowTimeSeconds();
// render(context);
setInterval(function () {
render(context);
updata(); },
50)
}; function updata() {
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 getCurrentShowTimeSeconds() {
var curTime=new Date();
var ret=endTime.getTime()-curTime.getTime();
ret=Math.round(ret/1000);
return ret>=0?ret:0;
} 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_LIFT,MARGIN_TOP,parseInt(hours/10),cxt);
renderDigit(MARGIN_LIFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
renderDigit(MARGIN_LIFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
renderDigit(MARGIN_LIFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
renderDigit(MARGIN_LIFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
renderDigit(MARGIN_LIFT+69*(RADIUS+1),MARGIN_TOP,parseInt(10),cxt);
renderDigit(MARGIN_LIFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
renderDigit(MARGIN_LIFT+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()
}
}

countdown

各一秒变化一次:

2.使用canvas做一个物理小球

新建一个physical.html

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display: block;margin: 50px auto;"></canvas>
</body> <script>
var ball={x:512,y:100,r:20,g:2,vx:-4,vy:0,color:"#005588"};
window.onload=function (ev) {
var canvas=document.getElementById("canvas");
canvas.width=1024;
canvas.height=600;
var context=canvas.getContext("2d");
//每隔50毫秒,生成一次小球,并更新下一次小球出现的位置和速度
setInterval(function () {
render(context);
update();
},50)
};
function render(cxt) {
cxt.clearRect(0,0,cxt.canvas.width,cxt.canvas.height); cxt.fillStyle=ball.color;
cxt.beginPath();
cxt.arc(ball.x,ball.y,ball.r,0,2*Math.PI)
cxt.closePath(); cxt.fill();
}
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.5;
}
} </script>
</html>

physical.html

3.根据物理小球的例子,对countdown.js进行改写:

1.声明一个数组存放所有产生的小球,声明另一个数组存放几种颜色,用于随机取出赋给小球,以达到多种颜色小球的效果:

 //小球
var balls = [];
const colors = ["#33B5E5",
"#0099CC",
"#AA66CC",
"#9933CC",
"#99CC00",
"#669900",
"#FFBB33",
"#FF8800",
"#FF4444",
"#CC0000"]

2.在update()函数中增加判断生成物理小球的条件,以及调用更新小球所在位置和速度的函数updateBalls():

 if(nextSeconds!=curSeconds){
//小球
if( parseInt(curHours/10) != parseInt(nextHours/10) ){
addBalls( MARGIN_LIFT + 0 , MARGIN_TOP , parseInt(curHours/10) );
}
if( parseInt(curHours%10) != parseInt(nextHours%10) ){
addBalls( MARGIN_LIFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );
} if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
addBalls( MARGIN_LIFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );
}
if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
addBalls( MARGIN_LIFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );
} if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
addBalls( MARGIN_LIFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );
}
if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
addBalls( MARGIN_LIFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%10) );
} //更新时间
curShowTimeSeconds=nextShowTimeSeconds;
}
//更新小球的速度
updateBalls();

3.定义设置要生成的小球的各种参数的函数addBalls():

 function addBalls( x , y , num ){
console.log("addBalls");
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);
}
}

4.定义更新小球位置和速度的函数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 >= WINDOW_HEIGHT-RADIUS ){
balls[i].y = WINDOW_HEIGHT-RADIUS;
balls[i].vy = - balls[i].vy*0.75;
}
}
}

5.在render函数中增加画物理小球的代码:

 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();
}

修改后的countdown.js为:

 var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=600;
var RADIUS=8;
var MARGIN_TOP=60;
var MARGIN_LIFT=30;
const endTime=new Date("2018/3/20,18:47:52");//const代表常量
var curShowTimeSeconds=0; //小球
var balls = [];
const colors = ["#33B5E5",
"#0099CC",
"#AA66CC",
"#9933CC",
"#99CC00",
"#669900",
"#FFBB33",
"#FF8800",
"#FF4444",
"#CC0000"] window.onload=function () { var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d'); canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT; curShowTimeSeconds=getCurrentShowTimeSeconds();
// render(context);
setInterval(function () {
render(context);
update();
},
50)
}; 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_LIFT + 0 , MARGIN_TOP , parseInt(curHours/10) );
}
if( parseInt(curHours%10) != parseInt(nextHours%10) ){
addBalls( MARGIN_LIFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );
} if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
addBalls( MARGIN_LIFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );
}
if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
addBalls( MARGIN_LIFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );
} if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
addBalls( MARGIN_LIFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );
}
if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
addBalls( MARGIN_LIFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%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 >= WINDOW_HEIGHT-RADIUS ){
balls[i].y = WINDOW_HEIGHT-RADIUS;
balls[i].vy = - balls[i].vy*0.75;
}
}
} function addBalls( x , y , num ){
console.log("addBalls");
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 getCurrentShowTimeSeconds() {
var curTime=new Date();
var ret=endTime.getTime()-curTime.getTime();
ret=Math.round(ret/1000);
return ret>=0?ret:0;
} 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_LIFT,MARGIN_TOP,parseInt(hours/10),cxt);
renderDigit(MARGIN_LIFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
renderDigit(MARGIN_LIFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
renderDigit(MARGIN_LIFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
renderDigit(MARGIN_LIFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
renderDigit(MARGIN_LIFT+69*(RADIUS+1),MARGIN_TOP,parseInt(10),cxt);
renderDigit(MARGIN_LIFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
renderDigit(MARGIN_LIFT+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()
}
}

countdown

效果达到了,不过小球会越来越多,最后弄得网页很卡很卡,对于代码的性能优化,是具有必要性的!

四、性能优化、扩展

1.优化:

改写countdown.js给updateBalls增加代码,让物理小球离开画布的,全都消失解放内存。(原视频教程中bug,我用另外的方法实现的,效果不错)

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

修改以后的countdown.js代码:

 var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=600;
var RADIUS=8;
var MARGIN_TOP=60;
var MARGIN_LIFT=30;
const endTime=new Date("2018/3/20,18:47:52");//const代表常量
var curShowTimeSeconds=0; //小球
var balls = [];
const colors = ["#33B5E5",
"#0099CC",
"#AA66CC",
"#9933CC",
"#99CC00",
"#669900",
"#FFBB33",
"#FF8800",
"#FF4444",
"#CC0000"] window.onload=function () { var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d'); canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT; curShowTimeSeconds=getCurrentShowTimeSeconds();
// render(context);
setInterval(function () {
render(context);
update();
//打印物理小球个数
console.log(balls.length);
},
50)
}; 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_LIFT + 0 , MARGIN_TOP , parseInt(curHours/10) );
}
if( parseInt(curHours%10) != parseInt(nextHours%10) ){
addBalls( MARGIN_LIFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );
} if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
addBalls( MARGIN_LIFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );
}
if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
addBalls( MARGIN_LIFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );
} if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
addBalls( MARGIN_LIFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );
}
if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
addBalls( MARGIN_LIFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%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 >= WINDOW_HEIGHT-RADIUS ){
balls[i].y = WINDOW_HEIGHT-RADIUS;
balls[i].vy = - balls[i].vy*0.75;
}
} var cnt=[];
for(var i=0;i<balls.length;i++){
if(balls[i].x-RADIUS>0&&balls[i].x+RADIUS<WINDOW_WIDTH){
cnt.push(balls[i]);
}
}
balls=cnt; } 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 getCurrentShowTimeSeconds() {
var curTime=new Date();
var ret=endTime.getTime()-curTime.getTime();
ret=Math.round(ret/1000);
return ret>=0?ret:0;
} 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_LIFT,MARGIN_TOP,parseInt(hours/10),cxt);
renderDigit(MARGIN_LIFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
renderDigit(MARGIN_LIFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
renderDigit(MARGIN_LIFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
renderDigit(MARGIN_LIFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
renderDigit(MARGIN_LIFT+69*(RADIUS+1),MARGIN_TOP,parseInt(10),cxt);
renderDigit(MARGIN_LIFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
renderDigit(MARGIN_LIFT+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()
}
}

countdown.js

效果图:

2.扩展改写为时钟

改写countdown.js中的getCurrentShowTimeSeconds函数:

 function getCurrentShowTimeSeconds() {
var curTime=new Date();
var ret=curTime.getHours()*3600+curTime.getMinutes()*60+curTime.getSeconds();
return ret;
}

countdown.js时钟代码:

 var WINDOW_WIDTH=1024;
var WINDOW_HEIGHT=600;
var RADIUS=8;
var MARGIN_TOP=60;
var MARGIN_LIFT=30;
//const endTime=new Date("2018/3/20,18:47:52");//const代表常量
var curShowTimeSeconds=0; //小球
var balls = [];
const colors = ["#33B5E5",
"#0099CC",
"#AA66CC",
"#9933CC",
"#99CC00",
"#669900",
"#FFBB33",
"#FF8800",
"#FF4444",
"#CC0000"] window.onload=function () { var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d'); canvas.width=WINDOW_WIDTH;
canvas.height=WINDOW_HEIGHT; curShowTimeSeconds=getCurrentShowTimeSeconds();
// render(context);
setInterval(function () {
render(context);
update();
//打印物理小球个数
console.log(balls.length);
},
50)
}; 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_LIFT + 0 , MARGIN_TOP , parseInt(curHours/10) );
}
if( parseInt(curHours%10) != parseInt(nextHours%10) ){
addBalls( MARGIN_LIFT + 15*(RADIUS+1) , MARGIN_TOP , parseInt(curHours/10) );
} if( parseInt(curMinutes/10) != parseInt(nextMinutes/10) ){
addBalls( MARGIN_LIFT + 39*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes/10) );
}
if( parseInt(curMinutes%10) != parseInt(nextMinutes%10) ){
addBalls( MARGIN_LIFT + 54*(RADIUS+1) , MARGIN_TOP , parseInt(curMinutes%10) );
} if( parseInt(curSeconds/10) != parseInt(nextSeconds/10) ){
addBalls( MARGIN_LIFT + 78*(RADIUS+1) , MARGIN_TOP , parseInt(curSeconds/10) );
}
if( parseInt(curSeconds%10) != parseInt(nextSeconds%10) ){
addBalls( MARGIN_LIFT + 93*(RADIUS+1) , MARGIN_TOP , parseInt(nextSeconds%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 >= WINDOW_HEIGHT-RADIUS ){
balls[i].y = WINDOW_HEIGHT-RADIUS;
balls[i].vy = - balls[i].vy*0.75;
}
} var cnt=[];
for(var i=0;i<balls.length;i++){
if(balls[i].x-RADIUS>0&&balls[i].x+RADIUS<WINDOW_WIDTH){
cnt.push(balls[i]);
}
}
balls=cnt; } 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 getCurrentShowTimeSeconds() {
var curTime=new Date();
var ret=curTime.getHours()*3600+curTime.getMinutes()*60+curTime.getSeconds();
return ret;
} 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_LIFT,MARGIN_TOP,parseInt(hours/10),cxt);
renderDigit(MARGIN_LIFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);
renderDigit(MARGIN_LIFT+30*(RADIUS+1),MARGIN_TOP,10,cxt);
renderDigit(MARGIN_LIFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);
renderDigit(MARGIN_LIFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);
renderDigit(MARGIN_LIFT+69*(RADIUS+1),MARGIN_TOP,parseInt(10),cxt);
renderDigit(MARGIN_LIFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);
renderDigit(MARGIN_LIFT+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()
}
}

现在的时间,效果图。

至此,完成了canvas的动画基础!

炫丽的倒计时效果Canvas绘图与动画基础的更多相关文章

  1. 【HTML5】炫丽的时钟效果Canvas绘图与动画基础练习

    源自慕课网 效果如下: 全部代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  2. canvas-炫丽的倒计时效果Canvas绘图与动画基础

    canvas 是基于转台来绘制的 来了解一下canvas的浏览器兼容性问题,如下图所示.(截图自can i use) tips:刚刚拿去ie8下测了一下,什么反应都没有,提前设定好的,如果该浏览器不支 ...

  3. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  4. 学习Canvas绘图与动画基础 制作弧和圆(五)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  5. 学习Canvas绘图与动画基础 绘制多条路径(四)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  6. 学习Canvas绘图与动画基础 为多边形着色(三)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  7. 学习Canvas绘图与动画基础 绘制直线(二)

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="U ...

  8. 学习Canvas绘图与动画基础 canvas入门(一)

    一.创建canvas 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta char ...

  9. [ html canvas createImageData 创建万花筒效果 ] canvas绘图属性 createImageData 属性讲解 及创建万花筒效果

    <!DOCTYPE html> <html lang='zh-cn'> <head> <title>Insert you title</title ...

随机推荐

  1. React——diff算法

    react的diff算法基于两个假设: 1.不同类型的元素会产生不同的树 2.通过设置key,开发者能够提示那些子组件是稳定的 diff算法 当比较两个树时,react首先会比较两个根节点,接下来具体 ...

  2. MyEclipse中如何去掉JS/JSP语法错误提示

    一    优化一下MyEclipse 1 .关闭MyEclipse的自动validation      windows > perferences > myeclipse > val ...

  3. android/底层获取上下文对象

    public class ContextUtils { private static Context applicationContext = null; public static Context ...

  4. Node 定时器详解

    JavaScript 是单线程运行,异步操作特别重要. 只要用到引擎之外的功能,就需要跟外部交互,从而形成异步操作.由于异步操作实在太多,JavaScript 不得不提供很多异步语法.这就好比,有些人 ...

  5. 笔记+R︱Logistics建模简述(logit值、sigmoid函数)

    本笔记源于CDA-DSC课程,由常国珍老师主讲.该训练营第一期为风控主题,培训内容十分紧凑,非常好,推荐:CDA数据科学家训练营 ---------------------------------- ...

  6. directdraw显示rgb555

    // TODO: 在此添加控件通知处理程序代码  height=width=widthBytes=0;  m_screen.SetWindowPos(&CWnd::wndBottom,0,0, ...

  7. 【mongodb系统学习之四】查看mongodb进程

    四.查看mongodb进程(可以配合启动和关闭使用): 1).方法一:直接查看mongodb进程是否已经存在(用上面的方式启动后,需要另开一个窗口操作):ps –ef|grep mongodb, 如图 ...

  8. freemarker自定义标签报错(七)

    1.错误描述 六月 09, 2014 11:11:09 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...

  9. freemarker嵌入文件输出结果

    freemarker嵌入文件输出结果 1.嵌入的文件代码 inc.ftl: <#assign username="李思思"> 2.父文件代码 inner.ftl: &l ...

  10. 微信开发中access_token,js_ticket,时间戳,签名生成工具

    Access_token生成工具 工具地址:https://mp.weixin.qq.com/debug 这个工具主要用来验证和生成微信公众号access_token,主要有正确的app_id和app ...