利用canvas绘制绚丽的电子钟
在慕课网上看到一位老师的电子钟，效果蛮酷，就自己模仿写了下来。这个程序有两个难点，第一是数字的坐标确定，第二个是彩色圆点的动画控制。
总结一下思路，确定点的坐标是利用一个三维数组，根据小圆点的半径计算出来的，要想每个彩色小球有不同的速度方向和颜色，我们需要每个小球都是一个对象，为此我们写一个类来生成许多个彩色小球。在绘制蓝色字体的时候，我们判断是否需要绘制彩色小球，如果需要，则拿出相应的坐标，传给小球的类，生成对象后保存在数组里面，游戏循环的时候遍历存放小球对象的数据并且调用小球的draw()方法即可，同时注意对小球生命周器的检测，如果已经消失在视野，小球就应该结束他的生命周期了。、
另外一个难点，看代码式子了，很好理解。
数字绘制的数据：digit.js
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] ]//: ];
彩色小球类：ball.js
var ballObj = function (x,y) { this.x = x; this.y = y; this.alive = false; this.vy = 0;//y方向的速度 this.vx = 0;//x方向的速度 this.g = .2;//纵向加速度 this.xg = 0;//横向加速度 this.color = ''; }; ballObj.prototype.init = function () { var k = Math.random() < .5 ? 1 : -1; var R = Math.ceil(Math.random() * 255); var G = Math.ceil(Math.random() * 255); var B = Math.ceil(Math.random() * 255); this.alive = false; this.vy = Math.random(); this.xg = Math.random() * 2; this.vx = 5 * k * this.xg; this.r = radius; this.color = R + ',' + G + ',' + B; }; ballObj.prototype.born = function () { this.alive = true; }; //go out canvas ballObj.prototype.kill = function () { if (this.x + radius < 0 || this.x - radius > canWidth) { this.alive = false; } //碰到地板反弹 if (this.y + radius > canHeight) { this.y = canHeight - radius; this.vy = -this.vy * .6; } }; ballObj.prototype.draw = function () { if (this.alive) { ctx.save(); ctx.beginPath(); ctx.fillStyle = 'rgb(' + this.color + ')'; ctx.arc(this.x,this.y,this.r,0,2 * Math.PI); ctx.closePath(); ctx.fill(); ctx.restore(); this.vy += this.g; this.y += this.vy; this.x += this.vx; } //改变速度 this.y += this.vy; this.vy += this.g; };
核心程序文件：main.js
var canWidth = 1024; var canHeight = 768; var radius = 8; var marLeft = 30; var marTop = 30; var canvas; var ctx; var ball = []; var posX = []; var hour; var minute; var second; var oldTime = []; //old time window.onload = gameInit; function gameInit() { canvas = document.getElementById('canvas'); ctx = canvas.getContext('2d'); canvas.width = canWidth; canvas.height = canHeight; //start position posX = [ marLeft, marLeft + 15 * (radius + 1), marLeft + 30 * (radius + 1), marLeft + 39 * (radius + 1), marLeft + 54 * (radius + 1), marLeft + 69 * (radius + 1), marLeft + 78 * (radius + 1), marLeft + 93 * (radius + 1) ]; //time hour = new Date().getHours(); minute = new Date().getMinutes(); second = new Date().getSeconds(); oldTime = [ parseInt(hour / 10), hour % 10, 10, parseInt(minute / 10), minute % 10, 10, parseInt(second / 10), second % 10 ]; gameLoop(); } function gameLoop() { //清空画布 ctx.clearRect(0,0,canWidth,canHeight); hour = new Date().getHours(); minute = new Date().getMinutes(); second = new Date().getSeconds(); var num = [ parseInt(hour / 10), hour % 10, 10, parseInt(minute / 10), minute % 10, 10, parseInt(second / 10), second % 10 ]; //draw time for (var i = 0; i < num.length; i++) { renderDigit(posX[i],num[i],ctx,oldTime[i] == num[i]); } oldTime = num; //draw color ball for (var k = 0; k < ball.length; k++) { ball[k].kill(); ball[k].draw(); if (ball[i].alive == false) { ball.splice(i,1); } } requestAnimationFrame(gameLoop); } function renderDigit(x,num,ctx,equ) { ctx.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) { var aX = x + j * 2 * (radius + 1) + radius + 1; var aY = marTop + i * 2 * (radius + 1) + radius + 1; ctx.beginPath(); ctx.arc(aX,aY,radius,0,2 * Math.PI); ctx.closePath(); ctx.fill(); //拿到需要的彩色小球的坐标 if (!equ) { bornBall(aX,aY); } } } } } //创建小球对象并且放到数组 function bornBall(x,y) { var obj = new ballObj(x,y); obj.init(); obj.born(); ball.push(obj); }
