HTML5 Canvas学习之路(六)
一个炫酷的计时器
在慕课网看到一个canvas的课,感觉很炫酷,就把它看完了,然后记下来。
http://www.imooc.com/learn/133
第一步:绘制要显示的时间
拿小球来绘制具体的数字,具体的信息存储在一个三维数组里。具体绘制小球的代码如下:
function renderDigit(x,y,num,ctx) {
ctx.fillStyle = '#3a48ab';
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){
ctx.beginPath();
ctx.arc(x+2*j*(RADIUS+1)+(RADIUS+1),y+2*i*(RADIUS+1)+(RADIUS+1),
RADIUS,0,2*Math.PI);
ctx.closePath();
ctx.fill();
}
}
}
第二步:绘制倒计时效果
function render(ctx) {
ctx.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGH);
var hours = parseInt(curShowTimeSeconds / 3600);
var minutes = parseInt((curShowTimeSeconds - hours*3600) / 60);
var seconds = curShowTimeSeconds % 60;
renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),ctx);
renderDigit(MARGIN_LEFT+15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),ctx);
renderDigit(MARGIN_LEFT+30*(RADIUS+1),MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT+39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),ctx);
renderDigit(MARGIN_LEFT+54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),ctx);
renderDigit(MARGIN_LEFT+69*(RADIUS+1),MARGIN_TOP,10,ctx);
renderDigit(MARGIN_LEFT+78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),ctx);
renderDigit(MARGIN_LEFT+93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),ctx);
for (var i=0;i<balls.length;i++){
ctx.fillStyle = balls[i].color;
ctx.beginPath();
ctx.arc(balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true);
ctx.closePath();
ctx.fill();
}
}
第三步:绘制不同颜色的小球散落效果
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_HEIGH - RADIUS){
balls[i].y = WINDOW_HEIGH - RADIUS;
balls[i].vy = -balls[i].vy*0.75;
}
}
}
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+2*j*(RADIUS+1)+(RADIUS+1),
y:y+2*i*(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);
}
}
}
}
最后,实现效果如下:
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hb1ba1aha1j