Canvas入門（1）：繪制矩形、圓、直線、曲線等基本圖形
來源：http://www.ido321.com/968.html
一、Canvas的基礎知識
Canvas是HTML 5中新增的元素，專門用於繪制圖形。canvas元素就相當於一塊“畫布”，一塊無色的透明區域。須要利用JavaScript編寫在當中進行繪畫的腳本。
在頁面放置canvas元素非常easy。利用<canvas>標簽。同一時候指定幾個主要的屬性：id,width和height。接下來通過幾個小案例，跟我入門canvas吧~~~^_^~~~
二、Canvas小案例（測試結果來自Google最新版本號）
1、繪制矩形
canvas.html:
1: <!DOCTYPE >
2: <html>
3: <head>
4: <meta charset="utf-8">
5: <title>canvas元素學習</title>
6: <script type="text/javascript" src="canvas.js">
7: </script>
8: </head>
9: <body>
10: <h3>canvas元素學習</h3>
11: <canvas id="canvas"width="400" height="300"></canvas>
12: </body>
13: </html>
canvas.js:
1: window.onload=function()
2: {
3: // 獲取canvas 的ID
4: var canvas = document.getElementById(‘canvas‘);
5: if (canvas == null)
6: {
7: return false;
8: }
9:// 獲取上下文
10: var context = canvas.getContext(‘2d‘);
11: // 設置填充的樣式
12: context.fillStyle = "#eeeeff";
13:// 繪制矩形,以fillStyle填充。fillRect（strokeRect）前兩個參數是矩形左上角位置,後兩個參數各自是寬和高
//默認原點是canvas的左上角
14: context.fillRect(0,0,400,300);
15: context.fillStyle = ‘red‘;
16: // 設置邊框的樣式
17: context.strokeStyle = ‘blue‘;
18: // 設置邊框大小
19: context.lineWidth = 2;
20: context.fillRect(50,50,100,100);
21: // 繪制矩形邊框
22: context.strokeRect(50,50,100,100);
23: }
效果：
2、繪制圓形：使用路徑繪制
1: // 獲取canvas 的ID
2: var canvas = document.getElementById(‘canvas‘);
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 獲取上下文
8: var context = canvas.getContext(‘2d‘);
9: // 設置填充的樣式
10: context.fillStyle = "#eeeeff";
11: // 繪制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: for(var i = 0; i<9; i++)
14: {
15: // 創建路徑
16: context.beginPath();
17: // 繪制圓形路徑
18: context.arc(i*25, i*25, i*10, 0, Math.PI * 2, true);
19: // 關閉路徑。假設不關閉，則圖像會重疊
20: context.closePath();
21: context.fillStyle = ‘rgba(255,0,0,0.25)‘;
22: // 以fillStyle填充
23: context.fill();
24: }
arc()繪制圓弧。其參數例如以下
arc(x,y,radius,startAngle,endAngle,anticlockwise):x,y是圓弧的圓心位置，radius是半徑，startAngle和endAngle是起始和結束的角度，單位是弧度（度數必須轉為弧度），anticlockwise是一個布爾值，true表示順時針繪制圖像。false表示逆時針繪制。起始角度是0。結束角度是360（PI*2）就能夠繪制圓形。
效果：
3、繪制直線
繪制直線用到moveTo()和lineTo()兩個方法
1: // 獲取canvas 的ID
2: var canvas = document.getElementById(‘canvas‘);
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 獲取上下文
8: var context = canvas.getContext(‘2d‘);
9: // 設置填充的樣式
10: context.fillStyle = "#eeeeff";
11: // 繪制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: context.beginPath();
//參數線的起點坐標
14: context.moveTo(50,50);
//參數線的終點坐標
15: context.lineTo(100,100);
16: context.closePath();
//關閉路徑之後繪制圖形
17: context.strokeStyle = ‘red‘;
18: context.stroke();
效果：
繪制一個復雜點的
1: // 獲取canvas 的ID
2: var canvas = document.getElementById(‘canvas‘);
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 獲取上下文
8: var context = canvas.getContext(‘2d‘);
9: // 設置填充的樣式
10: context.fillStyle = "#eeeeff";
11: // 繪制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: var dx = 150;
14: var dy = 150;
15: var s = 100;
16: // 創建路徑
17: context.beginPath();
18: context.fillStyle = ‘rgb(100,255,100)‘;
19: context.strokeStyle = ‘rgb(0,0100)‘;
20: var x = Math.sin(0);
21: var y = Math.cos(0);
22: var dig = Math.PI/15 *11;
23: for (var i = 0; i < 30; i++) {
24: var x = Math.sin(i * dig);
25: var y = Math.cos(i * dig);
26: context.lineTo(dx+x*s,dx+y*s);
27: }
28: context.closePath();
29: context.fill();
30: context.stroke();
效果：
4、繪制曲線：利用bezierCurveTo繪制貝濟埃曲線
bezierCurveTo能夠繪制曲線，是lineTo的曲線版本號
1: // 獲取canvas 的ID
2: var canvas = document.getElementById(‘canvas‘);
3: if (canvas == null)
4: {
5: return false;
6: }
7: // 獲取上下文
8: var context = canvas.getContext(‘2d‘);
9: // 設置填充的樣式
10: context.fillStyle = "#eeeeff";
11: // 繪制矩形,以fillStyle填充
12: context.fillRect(0,0,400,300);
13: var dx = 150;
14: var dy = 150;
15: var s = 100;
16: // 創建路徑
17: context.beginPath();
18: context.fillStyle = ‘rgb(100,255,100)‘;
19: context.strokeStyle = ‘rgb(0,0100)‘;
20: var x = Math.sin(0);
21: var y = Math.cos(0);
22: var dig = Math.PI/15 *11;
23: context.moveTo(dx,dy);
24: for (var i = 0; i < 30; i++) {
25: var x = Math.sin(i * dig);
26: var y = Math.cos(i * dig);
27: context.bezierCurveTo(dx+x*s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
28: }
29: context.closePath();
30: context.fill();
31: context.stroke();
效果
下一篇：Canvas入門（2）:圖形漸變和圖像形變換
Canvas入門（1）：繪制矩形、圓、直線、曲線等基本圖形