来自 金沙js77888 2019-11-21 10:43 的文章
当前位置: 金沙js77888 > 金沙js77888 > 正文

没代码算个蛋

HTML5 Canvas画数字时钟,html5canvas画时钟

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

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

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

图片 1类似就是这样,没有经过美化。

 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>

 

Canvas画数字时钟,html5canvas画时钟 先不说废话,没代码算个蛋。 一些地方注释都写得比较清楚,不过这只是部分,因为只有秒针,但是...

本文由金沙js77888发布于金沙js77888,转载请注明出处:没代码算个蛋

关键词: