在慕課網上看到一位老師的電子鐘，效果蠻酷，就自己模仿寫了下來。這個程式有兩個難點，第一是數字的座標確定，第二個是彩色圓點的動畫控制。
總結一下思路，確定點的座標是利用乙個三維陣列，根據小圓點的半徑計算出來的，要想每個彩色小球有不同的速度方向和顏色，我們需要每個小球都是乙個物件，為此我們寫乙個類來生成許多個彩色小球。在繪製藍色字型的時候，我們判斷是否需要繪製彩色小球，如果需要，則拿出相應的座標，傳給小球的類，生成物件後儲存在陣列裡面，遊戲迴圈的時候遍歷存放小球物件的資料並且呼叫小球的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) ;
ballobj.prototype.init = function
() ;
ballobj.prototype.born = function
() ;
//go out canvas
ballobj.prototype.kill = function
()
//碰到地板**
if (this.y + radius >canheight)
};ballobj.prototype.draw = function
()
//改變速度
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;
varcanvas;
varctx;
var ball =;
var posx =;
varhour;
varminute;
varsecond;
var oldtime = ; //
old time
window.onload =gameinit;
function
gameinit()
function
gameloop()
oldtime =num;
//draw color ball
for (var k = 0; k < ball.length; k++)
}requestanimationframe(gameloop);
}function
renderdigit(x,num,ctx,equ) }}
}}//
建立小球物件並且放到陣列
function
bornball(x,y)
canvas基礎繪製 絢麗倒計時
效果圖 digit 1.js在之前的 canvas基礎繪製 倒計時 中有貼 countdown.js var window width 1024 var window height 768 var radius 8 var margin top 60 var margin left 30 var e...
canvas基礎繪製 絢麗倒計時
效果圖 digit 1.js在之前的 canvas基礎繪製 倒計時 中有貼 countdown.js var window width 1024 var window height 768 var radius 8 var margin top 60 var margin left 30 var e...
Canvas線段的繪製
moveto x,y lineto x,y linewidth 線條寬度 strokestyle 線條樣式 storoke 線條繪製 填充fillstyle 填充 fill 繪製填充 canvas提供的圖形繪製函式 rect x,y,width,height 定義矩形狀態 繪製矩形 fillrect...