尝试尝试，学了下H5。做了第一个小demo。需要用到的点。
1，canvas绘图api，绘制曲线圆，绘制文字。
2，怎么表示时钟数字。通过二维数组矩阵，利用绘制的圆，通过1和0来表示是否需要绘制来绘制数字。
3，定时器启动，改变数字。
4，完整版。ball的绘制，以及ball的改变。还有ball移出了画面清除等等。
已经把代码贴在后边了，三个版本的。代码比较简单，看看就能了解。
http://www.vini123.com/demo/h5/clock.html
完整code：
单一时钟版:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>时钟效果</title> <script type="text/javascript"> const CANVAS_WIDTH = 680; const CANVAS_HEIGHT = 200; const RADIUS = 5; const PADDING = 1; var context; window.onload = function() { var canvas = document.getElementById("acanvas"); context = canvas.getContext("2d"); setInterval(startDraw , 30); } function startDraw() { var date = new Date(); var hours = date.getHours(); var minute = date.getMinutes(); var secends = date.getSeconds(); hours = String(hours < 10 ? "0" + hours : hours); minute = String(minute < 10 ? "0" + minute : minute); secends = String(secends < 10 ? "0" + secends : secends); var toggleTime = hours + ":" + minute + ":" + secends; var digitPadding = (RADIUS + PADDING) * 15; var colonPadding = (RADIUS + PADDING) * 9; var startX = 0 , startY = RADIUS; context.clearRect(0 , 0 , CANVAS_WIDTH , CANVAS_HEIGHT); for(var i = 0 ; i < toggleTime.length ; i++) { if(toggleTime.charAt(i) == ":") { drawDigit(startX , startY , 10 , context); startX += colonPadding; } else { drawDigit(startX , startY , toggleTime.charAt(i) , context); startX += digitPadding; } } } function drawDigit(xpos , ypos , curDigit , context) { if(curDigit >= digit.length || curDigit <0) return; var curDigitArr = digit[curDigit]; for(var i = 0 ; i < curDigitArr.length ; i++) { for(var j = 0 ; j < curDigitArr[i].length ; j++) { if(curDigitArr[i][j] == 1) { context.beginPath(); context.fillStyle = "dodgerblue"; context.arc(xpos + j * (RADIUS + PADDING) * 2 , ypos + i * (RADIUS + PADDING) * 2 , RADIUS , 0 , 2 * Math.PI); context.fill(); context.closePath(); } } } } const 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] ]//: ]; </script> </head> <body> <canvas id="acanvas" width="680" height="200" style="border: 1 solid coral; display: block; margin:0 auto;"></canvas> </body> </html>
完整版：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>时钟效果</title> <script type="text/javascript"> const CANVAS_WIDTH = 680; const CANVAS_HEIGHT = 450; const RADIUS = 5; const PADDING = 1; var context; var curTime; var balls; var ballsColors; window.onload = function() { var canvas = document.getElementById("acanvas"); canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; context = canvas.getContext("2d"); curTime = ""; balls = []; ballsColors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; setInterval(start , 30); } function start() { // return; startDraw(); drawBall(); move(); } function move() { 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 > CANVAS_HEIGHT - RADIUS - PADDING) { balls[i].y = CANVAS_HEIGHT - RADIUS - PADDING; balls[i].vy = - balls[i].vy*0.75; } if(balls[i].x < 0 || balls[i].x > CANVAS_WIDTH) { balls.splice(i ,1); } } } function startDraw() { var date = new Date(); var hours = date.getHours(); var minute = date.getMinutes(); var secends = date.getSeconds(); hours = String(hours < 10 ? "0" + hours : hours); minute = String(minute < 10 ? "0" + minute : minute); secends = String(secends < 10 ? "0" + secends : secends); var toggleTime = hours + ":" + minute + ":" + secends; var digitPadding = (RADIUS + PADDING) * 15; var colonPadding = (RADIUS + PADDING) * 9; var startX = RADIUS , startY = RADIUS; context.clearRect(0 , 0 , CANVAS_WIDTH , CANVAS_HEIGHT); for(var i = 0 ; i < toggleTime.length ; i++) { if(toggleTime.charAt(i) == ":") { drawDigit(startX , startY , 10 , context); startX += colonPadding; } else { var needAdd = false; if(curTime.length == toggleTime.length && curTime.charAt(i) != toggleTime.charAt(i)) { needAdd = true; } drawDigit(startX , startY , toggleTime.charAt(i) , context , needAdd); startX += digitPadding; } } curTime = toggleTime; } function drawDigit(xpos , ypos , curDigit , context , needAdd) { if(curDigit >= digit.length || curDigit <0) return; var curDigitArr = digit[curDigit]; for(var i = 0 ; i < curDigitArr.length ; i++) { for(var j = 0 ; j < curDigitArr[i].length ; j++) { if(curDigitArr[i][j] == 1) { var circleX = xpos + j * (RADIUS + PADDING) * 2; var circleY = ypos + i * (RADIUS + PADDING) * 2; context.beginPath(); context.fillStyle = "dodgerblue"; context.arc(circleX , circleY , RADIUS , 0 , 2 * Math.PI); context.fill(); context.closePath(); if(needAdd) { addBall(circleX , circleY); } } } } } function drawBall() { for( i = 0 ; i< balls.length ; i++) { context.beginPath(); context.fillStyle = balls[i].color; context.arc(balls[i].x , balls[i].y , RADIUS , 0 , 2 * Math.PI); context.fill(); context.closePath(); } context.beginPath(); context.font = "15px 微软雅黑"; context.fillStyle = "dodgerblue"; context.fillText("小球的个数：" + balls.length , 10 ,150); } function addBall(x , y) { var ball = { x:x, y:y, g:1.4 + Math.random(), vx: (Math.random() > 0.5 ? -1 : 1) * 3, vy:5, color:ballsColors[Math.floor(ballsColors.length * Math.random())] }; balls.push(ball); } const 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] ]//: ]; </script> </head> <body> <canvas id="acanvas" style="border: 1 solid coral; display: block; margin:0 auto;"></canvas> </body> </html>
自适应完整版：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>时钟效果</title> <script type="text/javascript"> /** * http://blog1.vini123.com/ * */ const PADDING = 1; var canvas_width = 680; var canvas_height = 450; var radius = 5; var clock_startX = 0; var clock_startY = 0; var clock_endY = 0; var canvas; var context; var curTime; var balls; var ballsColors; window.onresize = function() { if(!canvas)return; canvas_width = document.body.clientWidth || document.documentElement.clientWidth; canvas_height = window.innerHeight; clock_startX = canvas_width * 0.1; clock_startY = (canvas_height - canvas_width * 0.8 * 0.6) * 0.5; clock_startY = clock_startY < 0 ? 0 : clock_startY; radius = canvas_width * 0.8 /115; radius = parseInt(radius); clock_startX = parseInt(clock_startX) + radius; clock_startY = parseInt(clock_startY) + radius + canvas_height * 0.05; clock_endY = canvas_height - clock_startY; canvas.width = canvas_width; canvas.height = canvas_height * 0.95; console.log(canvas_width + " " + canvas_height + " " + clock_startX + " " + clock_startY + " " + radius); } window.onload = function() { canvas = document.getElementById("acanvas"); canvas.width = canvas_width; context = canvas.getContext("2d"); curTime = ""; balls = []; ballsColors = ["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]; window.onresize(); setInterval(start , 30); } function start() { startDraw(); drawBall(); move(); } function move() { 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 > clock_endY - radius - PADDING) { balls[i].y = clock_endY - radius - PADDING; balls[i].vy = - balls[i].vy*0.75; } if(balls[i].x < 0 || balls[i].x > canvas_width) { balls.splice(i ,1); } } } function startDraw() { var date = new Date(); var hours = date.getHours(); var minute = date.getMinutes(); var secends = date.getSeconds(); hours = String(hours < 10 ? "0" + hours : hours); minute = String(minute < 10 ? "0" + minute : minute); secends = String(secends < 10 ? "0" + secends : secends); var toggleTime = hours + ":" + minute + ":" + secends; var digitPadding = (radius + PADDING) * 15; var colonPadding = (radius + PADDING) * 9; var startX = clock_startX , startY = clock_startY; context.clearRect(0 , 0 , canvas_width , canvas_height); for(var i = 0 ; i < toggleTime.length ; i++) { if(toggleTime.charAt(i) == ":") { drawDigit(startX , startY , 10 , context); startX += colonPadding; } else { var needAdd = false; if(curTime.length == toggleTime.length && curTime.charAt(i) != toggleTime.charAt(i)) { needAdd = true; } drawDigit(startX , startY , toggleTime.charAt(i) , context , needAdd); startX += digitPadding; } } curTime = toggleTime; } function drawDigit(xpos , ypos , curDigit , context , needAdd) { if(curDigit >= digit.length || curDigit <0) return; var curDigitArr = digit[curDigit]; for(var i = 0 ; i < curDigitArr.length ; i++) { for(var j = 0 ; j < curDigitArr[i].length ; j++) { if(curDigitArr[i][j] == 1) { var circleX = xpos + j * (radius + PADDING) * 2; var circleY = ypos + i * (radius + PADDING) * 2; context.beginPath(); context.fillStyle = "dodgerblue"; context.arc(circleX , circleY , radius , 0 , 2 * Math.PI); context.fill(); context.closePath(); if(needAdd) { addBall(circleX , circleY); } } } } } function drawBall() { for( i = 0 ; i< balls.length ; i++) { context.beginPath(); context.fillStyle = balls[i].color; context.arc(balls[i].x , balls[i].y , radius , 0 , 2 * Math.PI); context.fill(); context.closePath(); } context.beginPath(); context.font = "15px 微软雅黑"; context.fillStyle = "#ffffff"; context.fillText("小球的个数：" + balls.length , 10 , 30); } function addBall(x , y) { var ball = { x:x, y:y, g:1.4 + Math.random(), vx: (Math.random() > 0.5 ? -1 : 1) * 3, vy:5, color:ballsColors[Math.floor(ballsColors.length * Math.random())] }; balls.push(ball); } const 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] ]//: ]; </script> </head> <body style="height: 100%;"> <canvas id="acanvas" style="border: 1 solid coral; display: block; margin:0 auto; height: 95%;"></canvas> </body> </html>