Canvas入門（1）：繪製矩形、圓、直線、曲線等基本圖形
阿新 • • 發佈：2019-02-06
一、Canvas的基礎知識
Canvas是HTML 5中新增的元素，專門用於繪製圖形。canvas元素就相當於一塊“畫布”，一塊無色的透明區域，需要利用JavaScript編寫在其中進行繪畫的指令碼。
在頁面放置canvas元素很簡單，利用<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();
效果
