使用HTML5的canvas做一个会动的时钟

使用HTML5的canvas做一个会动的时钟

这次我们的目标是画一个会和时间同步的时钟，不过没有美学感觉，样子丑的厉害。

HTML5支持canvas了，我们可以直接在页面上绘图了，我看了下canvas和GDI+的接口差不多，所以我们先了解些基本的概念和方式，然后来做一个应用吧。

我们做所有的画之情需要一个画布，html的canvas标签就是帮我们声明了一个画布。

1. <canvas id="mycanvas">  
2. </canvas>  

这个默认的画布的大小是300*150，接下来的工作大多就是javaScript来做了。

首先要实例化这个画布

1. $(  
2. function() {  
3.     var canvas = document.getElementById("mycanvas");  
4.     $.log(canvas.width);  
5.     $.log(canvas.height);  
6.     var context = canvas.getContext("2d");  
7.     $.log(context.canvas);  
8.     $.log(context.fillStyle); //要填充的区域的颜色   
9.     $.log(context.strokeStyle); //要绘制的线条的颜色   
10.     $.log(context.lineCap); //笔帽样式   
11.     $.log(context.lineJoin); //两条连续线段的连接样式   
12.     $.log(context.lineWidth); //线段的宽度   
13.     $.log(context.miterLimit); //斜联接   
14.     $.log(context.shadowColor); //阴影的颜色，默认为#000000，   
15.     $.log(context.shadowOffsetX); //阴影在x方向上的偏移量，默认为0，不受坐标转换的影响。   
16.     $.log(context.shadowOffsetY); //阴影在y方向上的偏移量，默认为0，不受坐标转换的影响。   
17.     $.log(context.shadowBlur); //阴影的模糊度，默认为0，负数值将会被忽略   
18. }  
19. );  

上面的结果你可以得到一个大致的想法，就是content可以认为是我们将来作画用的画笔（估计有专业人士对强烈抗议，我直接忽略），canvas就是我们的画布。我们现在的画笔是2D的画笔，换句话说就是画平面几何的画笔。

接下来，就是我们利用这个画笔来学习怎么画了

各种线

1. $(  
2. function() {  
3.     var canvas = document.getElementById("mycanvas");  
4.     var context = canvas.getContext("2d");  
5.     context.strokeStyle = "rgb(255, 0, 0)";  
6.   
7.     context.beginPath();  
8.     context.lineCap = "butt"; //默认   
9.     context.lineWidth = 10;  
10.     context.moveTo(10, 10);  
11.     context.lineTo(100, 10); //简单的一条线   
12.     context.stroke(); //该方法真正在画布上绘制该线段   
13.   
14.     context.beginPath();  
15.     context.lineCap = "round"; //圆形线头   
16.     context.moveTo(10, 30);  
17.     context.lineTo(100, 30);  
18.     context.stroke(); //该方法真正在画布上绘制该线段   
19.   
20.     context.beginPath();  
21.     context.lineCap = "square"; //方形线头   
22.     context.moveTo(10, 50);  
23.     context.lineTo(100, 50);  
24.     context.stroke(); //该方法真正在画布上绘制该线段   
25. }  
26. );  

各种阴影

1. $(  
2. function() {  
3.     var canvas = document.getElementById("mycanvas");  
4.     var context = canvas.getContext("2d");  
5.     context.strokeStyle = "rgb(255, 0, 0)";  
6.     context.lineWidth = 10;  
7.     context.shadowColor = "#0000FF";  
8.   
9.     context.beginPath();  
10.     context.lineCap = "round";  
11.     context.moveTo(10, 10);  
12.     context.lineTo(100, 10);  
13.     context.shadowOffsetX = 10;  
14.     context.shadowBlur = 10;  
15.     context.stroke();  
16.   
17.     context.beginPath();  
18.     context.lineCap = "round";  
19.     context.moveTo(10, 30);  
20.     context.lineTo(100, 30);  
21.     context.shadowOffsetY = 10;  
22.     context.shadowBlur = 10;  
23.     context.stroke();  
24.   
25. }  
26. );  

各种线∠连接

1. $(  
2. function() {  
3.     var canvas = document.getElementById("mycanvas");  
4.     var context = canvas.getContext("2d");  
5.     context.strokeStyle = "rgb(255, 0, 0)";  
6.     context.lineWidth = 10;  
7.     context.shadowColor = "#0000FF";  
8.   
9.     context.beginPath();  
10.     context.lineJoin = "miter"; //两条线段的外边缘一直扩展到它们相交   
11.     context.moveTo(10, 70);  
12.     context.lineTo(50, 10);  
13.     context.lineTo(80, 70);  
14.     context.stroke();  
15.   
16.     context.lineJoin = "bevel"; //以一个斜边进行连接   
17.     context.moveTo(100, 70);  
18.     context.lineTo(140, 10);  
19.     context.lineTo(180, 70);  
20.     context.stroke();  
21.   
22.     context.lineJoin = "round"; //:以一个圆弧边进行连接   
23.     context.beginPath();  
24.     context.moveTo(200, 70);  
25.     context.lineTo(240, 10);  
26.     context.lineTo(280, 70);  
27.     context.stroke();  
28.     context.closePath(); //关闭path   
29.   
30. }  
31. );  

1 2 3 4 下一页