這次我們的目標是畫一個會和時間同步的時鐘，不過沒有美學感覺，樣子丑的厲害。
HTML5支持canvas了，我們可以直接在頁面上繪圖了，我看了下canvas和GDI+的接口差不多，所以我們先了解些基本的概念和方式，然後來做一個應用吧。
我們做所有的畫之情需要一個畫布，html的canvas標簽就是幫我們聲明了一個畫布。
- <canvas id="mycanvas">
- </canvas>
這個默認的畫布的大小是300*150，接下來的工作大多就是javaScript來做了。
首先要實例化這個畫布
- $(
- function() {
- var canvas = document.getElementById("mycanvas");
- $.log(canvas.width);
- $.log(canvas.height);
- var context = canvas.getContext("2d");
- $.log(context.canvas);
- $.log(context.fillStyle); //要填充的區域的顏色
- $.log(context.strokeStyle); //要繪制的線條的顏色
- $.log(context.lineCap); //筆帽樣式
- $.log(context.lineJoin); //兩條連續線段的連接樣式
- $.log(context.lineWidth); //線段的寬度
- $.log(context.miterLimit); //斜聯接
- $.log(context.shadowColor); //陰影的顏色，默認為#000000，
- $.log(context.shadowOffsetX); //陰影在x方向上的偏移量，默認為0，不受坐標轉換的影響。
- $.log(context.shadowOffsetY); //陰影在y方向上的偏移量，默認為0，不受坐標轉換的影響。
- $.log(context.shadowBlur); //陰影的模糊度，默認為0，負數值將會被忽略
- }
- );
上面的結果你可以得到一個大致的想法，就是content可以認為是我們將來作畫用的畫筆（估計有專業人士對強烈抗議，我直接忽略），canvas就是我們的畫布。我們現在的畫筆是2D的畫筆，換句話說就是畫平面幾何的畫筆。
接下來，就是我們利用這個畫筆來學習怎麼畫了
各種線
- $(
- function() {
- var canvas = document.getElementById("mycanvas");
- var context = canvas.getContext("2d");
- context.strokeStyle = "rgb(255, 0, 0)";
-
- context.beginPath();
- context.lineCap = "butt"; //默認
- context.lineWidth = 10;
- context.moveTo(10, 10);
- context.lineTo(100, 10); //簡單的一條線
- context.stroke(); //該方法真正在畫布上繪制該線段
-
- context.beginPath();
- context.lineCap = "round"; //圓形線頭
- context.moveTo(10, 30);
- context.lineTo(100, 30);
- context.stroke(); //該方法真正在畫布上繪制該線段
-
- context.beginPath();
- context.lineCap = "square"; //方形線頭
- context.moveTo(10, 50);
- context.lineTo(100, 50);
- context.stroke(); //該方法真正在畫布上繪制該線段
- }
- );
各種陰影
- $(
- function() {
- var canvas = document.getElementById("mycanvas");
- var context = canvas.getContext("2d");
- context.strokeStyle = "rgb(255, 0, 0)";
- context.lineWidth = 10;
- context.shadowColor = "#0000FF";
-
- context.beginPath();
- context.lineCap = "round";
- context.moveTo(10, 10);
- context.lineTo(100, 10);
- context.shadowOffsetX = 10;
- context.shadowBlur = 10;
- context.stroke();
-
- context.beginPath();
- context.lineCap = "round";
- context.moveTo(10, 30);
- context.lineTo(100, 30);
- context.shadowOffsetY = 10;
- context.shadowBlur = 10;
- context.stroke();
-
- }
- );
各種線∠連接
- $(
- function() {
- var canvas = document.getElementById("mycanvas");
- var context = canvas.getContext("2d");
- context.strokeStyle = "rgb(255, 0, 0)";
- context.lineWidth = 10;
- context.shadowColor = "#0000FF";
-
- context.beginPath();
- context.lineJoin = "miter"; //兩條線段的外邊緣一直擴展到它們相交
- context.moveTo(10, 70);
- context.lineTo(50, 10);
- context.lineTo(80, 70);
- context.stroke();
-
- context.lineJoin = "bevel"; //以一個斜邊進行連接
- context.moveTo(100, 70);
- context.lineTo(140, 10);
- context.lineTo(180, 70);
- context.stroke();
-
- context.lineJoin = "round"; //:以一個圓弧邊進行連接
- context.beginPath();
- context.moveTo(200, 70);
- context.lineTo(240, 10);
- context.lineTo(280, 70);
- context.stroke();
- context.closePath(); //關閉path
-
- }
- );
