效果如下：
代碼如下：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>canvas時鐘</title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> <script> window.onload = function(){ var WINDOW_WIDTH = document.body.scrollWidth; var WINDOW_HEIGHT = document.body.scrollHeight-10; var RADIUS = 7; //球半徑 var NUMBER_GAP = 10; //數字之間的間隙 var u = 0.65; //碰撞能量損耗系數 var context; //Canvas繪制上下文 var balls = []; //存儲彩色的小球 const colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]; //彩色小球的顏色 var currentNums = []; //屏幕顯示的8個字符 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] ] //: ]; function drawDatetime(cxt) { var nums = []; var date = new Date(); var hours = date.getHours(); var num1 = Math.floor(hours / 10); var num2 = hours % 10; context.fillStyle = colors[(date.getSeconds()%10)]; var offsetX = WINDOW_WIDTH/4, offsetY = 30; nums.push({ num: num1 }); nums.push({ num: num2 }); nums.push({ num: 10 }); //冒號 var minutes = date.getMinutes(); var num1 = Math.floor(minutes / 10); var num2 = minutes % 10; nums.push({ num: num1 }); nums.push({ num: num2 }); nums.push({ num: 10 }); //冒號 var seconds = date.getSeconds(); var num1 = Math.floor(seconds / 10); var num2 = seconds % 10; nums.push({ num: num1 }); nums.push({ num: num2 }); for(var x = 0; x < nums.length; x++) { nums[x].offsetX = offsetX; offsetX = drawSingleNumber(offsetX, offsetY, nums[x].num, cxt); //兩個數字連一塊，應該間隔一些距離 if(x < nums.length - 1) { if((nums[x].num != 10) && (nums[x + 1].num != 10)) { offsetX += NUMBER_GAP; } } } //說明這是初始化 if(currentNums.length == 0) { currentNums = nums; } else { //進行比較 for(var index = 0; index < currentNums.length; index++) { if(currentNums[index].num != nums[index].num) { //不一樣時，添加彩色小球 addBalls(nums[index]); currentNums[index].num = nums[index].num; } } } renderBalls(cxt); updateBalls(); return date; } function addBalls(item) { var num = item.num; var numMatrix = digit[num]; for(var y = 0; y < numMatrix.length; y++) { for(var x = 0; x < numMatrix[y].length; x++) { if(numMatrix[y][x] == 1) { var ball = { offsetX: item.offsetX + RADIUS + RADIUS * 2 * x, offsetY: 30 + RADIUS + RADIUS * 2 * y, color: colors[Math.floor(Math.random() * colors.length)], g: 1.5 + Math.random(), vx: Math.pow(-1, Math.ceil(Math.random() * 10)) * 4 + Math.random(), vy: -5 } balls.push(ball); } } } } function renderBalls(cxt) { for(var index = 0; index < balls.length; index++) { cxt.beginPath(); cxt.fillStyle = balls[index].color; cxt.arc(balls[index].offsetX, balls[index].offsetY, RADIUS, 0, 2 * Math.PI); cxt.fill(); } } function updateBalls() { var i = 0; for(var index = 0; index < balls.length; index++) { var ball = balls[index]; ball.offsetX += ball.vx; ball.offsetY += ball.vy; ball.vy += ball.g; if(ball.offsetY > (WINDOW_HEIGHT - RADIUS)) { ball.offsetY = WINDOW_HEIGHT - RADIUS; ball.vy = -ball.vy * u; } if(ball.offsetX > RADIUS && ball.offsetX < (WINDOW_WIDTH - RADIUS)) { balls[i] = balls[index]; i++; } } //去除出邊界的球 for(; i < balls.length; i++) { balls.pop(); } } function drawSingleNumber(offsetX, offsetY, num, cxt) { var numMatrix = digit[num]; for(var y = 0; y < numMatrix.length; y++) { for(var x = 0; x < numMatrix[y].length; x++) { if(numMatrix[y][x] == 1) { cxt.beginPath(); cxt.arc(offsetX + RADIUS + RADIUS * 2 * x, offsetY + RADIUS + RADIUS * 2 * y, RADIUS, 0, 2 * Math.PI); cxt.fill(); } } } cxt.beginPath(); offsetX += numMatrix[0].length * RADIUS * 2; return offsetX; } var canvas = document.getElementById("canvas"); canvas.width = WINDOW_WIDTH; canvas.height = WINDOW_HEIGHT; context = canvas.getContext("2d"); //記錄當前繪制的時刻 var currentDate = new Date(); setInterval(function() { //清空整個Canvas，重新繪制內容 context.clearRect(0, 0, context.canvas.width, context.canvas.height); drawDatetime(context); }, 50) } </script> </head> <body> <canvas id="canvas"></canvas> </body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
