数字时钟，彩球滚落特效
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
HTML：
|
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数字时钟</title> <link rel="stylesheet" href="./95-数字时钟.css"> <style> body{height:100%;width:100%}#canvas{display:block;margin:50px auto;height:100%;width:100%} </style>
</head>
<body> <canvas id="canvas"></canvas> </body> <script> function render(cxt){cxt. clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);var hours = parseInt(curShowTimeSeconds / 3600);var minutes = parseInt((curShowTimeSeconds - hours * 3600) / 60);var seconds = curShowTimeSeconds % 60;// 数组为7*14的矩阵 renderDigit(MARGIN_LEFT,MARGIN_TOP,parseInt(hours/10),cxt);renderDigit(MARGIN_LEFT + 15*(RADIUS+1),MARGIN_TOP,parseInt(hours%10),cxt);renderDigit(MARGIN_LEFT + 30*(RADIUS+1),MARGIN_TOP,10,cxt);// 冒号：宽度9 renderDigit(MARGIN_LEFT + 39*(RADIUS+1),MARGIN_TOP,parseInt(minutes/10),cxt);renderDigit(MARGIN_LEFT + 54*(RADIUS+1),MARGIN_TOP,parseInt(minutes%10),cxt);renderDigit(MARGIN_LEFT + 69*(RADIUS+1),MARGIN_TOP,10,cxt);// 冒号： renderDigit(MARGIN_LEFT + 78*(RADIUS+1),MARGIN_TOP,parseInt(seconds/10),cxt);renderDigit(MARGIN_LEFT + 93*(RADIUS+1),MARGIN_TOP,parseInt(seconds%10),cxt);for( var i = 0;i < balls.length;i ++ ){cxt.fillStyle=balls[i].color;cxt.beginPath();cxt.arc( balls[i].x,balls[i].y,RADIUS,0,2*Math.PI,true );cxt.closePath();cxt.fill()}}function renderDigit(x,y,num,cxt){cxt.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){cxt.beginPath();cxt.arc(x+j*2*(RADIUS+1)+(RADIUS+1),y+i*2*(RADIUS+1)+(RADIUS+1),RADIUS,0,2*Math.PI);cxt.closePath();cxt.fill()}}}} </script> </html> |
