canvas絢麗的時鐘（特效仿慕課網波波老師倒計時特效）：
<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body style="height: 100%">
<canvas id="canvas" style="height: 100%"></canvas>
<script>
(function () {
//自適應調整
var WINDOW_WIDTH = document.body.clientWidth;
var WINDOW_HEIGHT = document.body.clientHeight;
var RADIUS = 4 / 5 * WINDOW_WIDTH / 110;
var LEFT = 0.1 * WINDOW_WIDTH;
var TOP = 0.25 * WINDOW_HEIGHT;
var SPACE = 1.5 * RADIUS;
// 初始全局變量
var balls = [];
var currTime = ['0', '0', '0', '0', '0', '0'];
var 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]
]//:
];
//主函數
window.onload = function () {
var canvas = document.getElementById('canvas');
canvas.width = WINDOW_WIDTH;
canvas.height = WINDOW_HEIGHT;
var context = canvas.getContext('2d');
setInterval(function () {
render(context, RADIUS, LEFT, TOP, SPACE);
update(context, RADIUS);
}, 50);
};
//顯示時鐘
function render(cxt, r, x, y, space) {
var time = new Date();
if (parseInt(time.getTime() / 1000) == parseInt((time.getTime() + 50)) / 1000) {
return;
}
var hour = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var nowTime = [parseInt(hour / 10), hour % 10, parseInt(minutes / 10), minutes % 10, parseInt(seconds / 10), seconds % 10];
cxt.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
for (var i = 0; i < nowTime.length; i++) {
if (nowTime[i] != currTime[i]) {
addBalls(x, y, nowTime[i], r);
}
renderDigit(x, y, nowTime[i], cxt, r);
x += 14 * r + space;
if (i === 1 || i === 3) {
renderDigit(x, y, 10, cxt, r);
x += 8 * r + space;
}
}
currTime = nowTime;
}
// 顯示單個數字
function renderDigit(x, y, num, cxt, r) {
cxt.fillStyle = 'rgb(0,102,103)';
var num = digit[num];
for (var j = 0; j < num.length; j++) {
for (var i = 0; i < num[j].length; i++) {
if (num[j][i] == 1) {
cxt.beginPath();
cxt.arc(x + (2 * i + 1) * r, y + (2 * j + 1) * r, r - 0.5, 0, 2 * Math.PI);
cxt.fill();
cxt.closePath();
}
}
}
}
//隨機顏色
function randomColor() {
var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'f'];
var color = '#';
for (var i = 0; i < 6; i++) {
color = color + arr[Math.floor(Math.random() * 16)];
}
return color;
}
// 存儲時鐘動畫跳躍的小球
function addBalls(x, y, num, r) {
for (var j = 0; j < digit[num].length; j++) {
for (var i = 0; i < digit[num][j].length; i++) {
if (digit[num][j][i] == 1) {
balls[balls.length] = {
x: x + (2 * i + 1) * r,
y: y + (2 * j + 1) * r,
g: parseInt(Math.random() * 5 + 1),
vx: Math.floor(Math.random() * 5 + 1) * Math.pow(-1, parseInt(Math.random() * 1000)),
vy: parseInt(Math.random() * 10 - 8),
color: randomColor()
};
}
}
}
}
// 將跳躍小球顯示出來，並去掉出了屏幕的小球
function update(cxt, r) {
var count = 0;
for (var i = 0; i < balls.length; i++) {
if (balls[i].y + r >= WINDOW_HEIGHT) {
balls[i].vy = -balls[i].vy * (Math.random() / 2 + 0.4);
}
if (balls[i].x - r >= 0 && balls[i].x + r <= WINDOW_WIDTH) {
balls[count] = balls[i];
count++;
}
cxt.beginPath();
cxt.fillStyle = balls[i].color;
cxt.arc(balls[i].x, balls[i].y, r - 0.5, 0, 2 * Math.PI);
cxt.fill();
cxt.closePath();
balls[i].x = balls[i].x + balls[i].vx;
balls[i].y = balls[i].y + balls[i].vy;
balls[i].vy = balls[i].vy + balls[i].g;
}
while (balls.length > count) {
balls.pop();
}
}
}());
</script>
</body>
</html>
效果圖：
