使用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)";
7. context.beginPath();
8. context.lineCap = "butt"; //默認
9. context.lineWidth = 10;
10. context.moveTo(10, 10);
11. context.lineTo(100, 10); //簡單的一條線
12. context.stroke(); //該方法真正在畫布上繪制該線段
14. context.beginPath();
15. context.lineCap = "round"; //圓形線頭
16. context.moveTo(10, 30);
17. context.lineTo(100, 30);
18. context.stroke(); //該方法真正在畫布上繪制該線段
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";
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();
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();
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";
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();
16. context.lineJoin = "bevel"; //以一個斜邊進行連接
17. context.moveTo(100, 70);
18. context.lineTo(140, 10);
19. context.lineTo(180, 70);
20. context.stroke();
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
30. }
31. );