前言
想要在自己做的网页中，加入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的动画基础！