HTML5 Canvas画数字时钟

最新推荐文章于 2024-04-02 16:45:14 发布

weixin_34124577

最新推荐文章于 2024-04-02 16:45:14 发布

阅读量195

点赞数

文章标签：前端 javascript ViewUI

原文链接：http://www.cnblogs.com/lm1107/p/4763698.html

版权

先不说废话，没代码算个蛋。

一些地方注释都写得比较清楚，不过这只是部分，因为只有秒针，但是时针，分针的逻辑都是一致的。

代码中有些坐标不知道为什么较不准，看看就好

类似就是这样，没有经过美化。

 1 <html>
 2 <head>
 3     <title></title>
 4 </head>
 5 <body>
 6     <canvas id="clock1.0" width="600" height="300" style="border:1px solid"></canvas>
 7     <script type="text/javascript">
 8         var canvas;
 9         var ctx;
10         var width = 600;
11         var height = 300;
12         var c_r = Math.min(width, height) / 3;
13         var pattern;
14         var j = new Date().getSeconds();//获取当前时间的秒数
15         function init() {
16             canvas = document.getElementById('clock1.0');
17             ctx = canvas.getContext('2d');//你懂得，必须得写的
18             ctx.fillStyle = "white";
19             ctx.fillRect(0, 0, width, height);
20             waiquan();
21             neiquan();//其实圆环的产生是黑色的外圈＋背景色的内圈
22             miaoshu();//内圈中写个秒数，去掉后也可以做圆环进度条
23         }
24         var image = new Image();
25         image.onload = function (e) {
26             pattern = ctx.createPattern(image, 'repeat');
27         }//加载个图片背景图
28         function miaoshu() {
29 
30             var miao = new Date().getSeconds();
31             if (miao < 10) {
32                 miao = "0" + miao;
33             }//秒数10以下，显示的是单位数，不美观
34             ctx.font = '80px arial';
35             image.src = 'redball.png';
36             ctx.fillStyle = pattern;//这个背景图是用来做数字文字背景，其实完全没必要的
37             ctx.fillText(miao, width / 2-45, height / 2+30);//图片填充的文字
38             ctx.strokeText(miao, width / 2 - 45, height / 2 + 30);//描边文字
39         }
40         function neiquan() {//内圈就是一个园，背景色的圆
41                 ctx.beginPath();
42                 ctx.moveTo(width / 2, height / 2);
43                 ctx.fillStyle = "white";
44                 ctx.arc(width / 2, height / 2, c_r *0.81, 0, 2 * Math.PI, false);//自己控制内圈半径
45                 ctx.fill();
46         }
47         function waiquan() {//外圈就需要考虑阴影面积了
48             if (j < 60) {
49                 var hudu = 2 * Math.PI / 360 * (j * 6);//采用弧度机制，360度分为60格，每格6度，360度为2PI，所以j最大值为59
50                 ctx.beginPath();
51                 ctx.moveTo(width / 2, height / 2);//这里添加moveTo，其实是定义Fill()时的起始点，这里就是从圆心
52                 //不添加上面这句，那么你画出来的阴影就不是扇形，是。类似切冬瓜。一圈一圈。。  
53                 ctx.arc(width / 2, height / 2, c_r, 3 / 2 * Math.PI, 3 / 2 * Math.PI + hudu, false);//这里就注意arc()的第四个参数，是弧度的起始位置，一般以前看到的都是0，这里要从3/2PI开始
54                 //var grd = ctx.createLinearGradient(width / 2, height / 2, c_r/2, 3 / 2 * Math.PI, width / 2, height / 2, c_r, 3 / 2 * Math.PI); //本来想搞高渐变的，目前不成功
55                 //grd.addColorStop(0, "#000000");
56                 //grd.addColorStop(1, "#ffff00");
57                 //ctx.fillStyle = grd;
58                 ctx.fillStyle = "grey";
59                 ctx.fill();
60                 j++
61             }
62             else {
63                 j = 1;//这里可扩展到分针，j=1表示秒针重置，这时分针+1
64             }
65         }
66 
67         function clean() {
68             ctx.fillStyle = "white";
69             ctx.fillRect(0, 0, width, height);//以背景色，清除画布
70         }
71 
72         setInterval(function () {//这里要注意的是清除的步骤，不然效果会很差
73             //先清空画布，把之前状态的清空，外圈，因为外圈黑色，再画内圈，把外圈中心盖掉，再画时间
74             clean();
75             waiquan();
76             neiquan();
77             miaoshu();
78 
79         }, 1000)//1000ms，走的快的钟就不是钟了
80         window.onload("load", init(), true);//init作为初始加载函数
81     </script>
82 </body>
83 </html>