canvas畫圖之初級篇
小女子准備將canvas畫圖分為初級篇，中級篇和高級篇來介紹，讀者們不要着急哦。
初級篇
一．首先什么是canvas呢？
canvas 是 HTML5 提供的一個用於展示繪圖效果的標簽. canvas 原意畫布, 帆
布. 在 HTML 頁面中用於展示繪圖效果. 最早 canvas 是蘋果提出的一個方案, 今天已經在大多數瀏覽器中實現。
canvas 英 ['kænvəs] 美 ['kænvəs] 帆布 畫布
二．讓我們先來了解下canvas的基本用法：
<canvas></canvas>
(1)使用 canvas 標簽(該標簽用於展示圖像)即可在頁面中開辟一塊區域. 可以通過設置其 width 和 height 來設置該區域的尺寸.
(2)默認情況下 canvas 的寬為300，高為150.
(3)不要使用 CSS 的方式設置寬高（會有拉伸的問題）, 應該使用 HTML 屬性.
(4)如果瀏覽器不支持 canvas 標簽, 那么就會將其解釋為 div 標簽. 因此常常在 canvas 中嵌入文本, 以提示用戶瀏覽器的能力.
(5)canvas 的兼容性非常強, 只要支持該標簽的, 基本功能都一樣, 因此不用考慮兼容性問題.
(6)canvas 本身不能繪圖. 是使用 JavaScript 來完成繪圖. canvas 對象提供了各種繪圖用的 api.
三.接下來該介紹下canvas的基本繪圖方法了。
1.基本繪圖步驟：
(1).獲得 canvas 對象.
(2).調用 getContext 方法, 提供字符串參數 '2d'.
(3).該方法返回 CanvasRenderingContext2D 類型的對象. 該對象提供基本的繪圖命令.
(4).使用 CanvasRenderingContext2D 對象提供的方法進行繪圖.
(5).基本繪圖命令:
a.設置開始繪圖的位置: context.moveTo( x, y ).
b.設置直線到的位置: context.lineTo( x, y ).
c.描邊繪制: context.stroke().
d.填充繪制: context.fill().
e.閉合路徑: context.closePath().
2.繪制基本線
var canvas = document.createElement( 'canvas' );
canvas.width = 500;
canvas.height = 400;
canvas.style.border = '1px dashed red';
document.body.appendChild( canvas );
// 獲得 CanvasRenderingContext2D 對象
var context = canvas.getContext( '2d' );
// 設置 起點
context.moveTo( 0, 0 );
// 繪制直線
context.lineTo( 500, 400 );
// 設置 起點
context.moveTo( 0, 400 );
// 繪制直線
context.lineTo( 500, 0 );
// 描邊顯示效果
context.stroke();
運行結果為：
3.計算機直角坐標系
需要注意的是，計算機直角坐標系與我們數學學習中的直角坐標系是有點區別的，垂直方向上，向下是正方向，向上為負方向，這點要與數學中的坐標系區別開來。如下圖所示：
代碼分析：
(1).需要繪圖就需要有 canvas 標簽, 該標簽用於展示圖像.
(2).canvas 的寬高不要使用 CSS 來設置, 會有拉伸的問題. 應該直接使用屬性設置.
(3).但是 canvas 只是展示圖像的標簽, 它沒有繪圖的能力. 需要使用 canvas 的上下文工具來實現繪圖.
(4).使用 canvas.getContext( '2d' ) 可以獲得繪圖工具, 該工具是 CanvasRenderingContext2D 類型的對象.
(5).需要繪圖, 首選設置繪圖的起點.
a.使用 canvas 繪圖, 最主要的是他主張先描點, 再連線繪制效果.
b.因此需要首先設置起點, 然后在起點的基礎上描述其他需要的點.
c.使用 CanvasRenderingContext2D.moveTo( x, y ) 方法設置起點.
d.其中 x, y 表示的是在坐標系中的位置.
(6).使用 CanvasRenderingContext2D.lineTo( x, y ) 來描述繪制直線的下一個點. 依次類推可以描述多個點.
(7).描點結束后, 需要使用 CanvasRenderingContext2D.stroke() 方法來連線. 才可以顯示出效果.
4.基本方法：
(1)getContext 方法
語法: Canvas.getContext( typeStr )
描述:
該方法用於繪制上下文工具.
如果是繪制平面圖形使用 '2d' 作為參數, 如果繪制立體圖形使用 'webgl'.
使用 '2d' 返回 CanvasRenderingContext2D 類型的對象.
使用 'webgl' 返回 WebGLRenderingContext 類型的對象.
(2) moveTo 方法
語法: CanvasRenderingContext2D.moveTo( x, y )
描述:
該方法用於設置繪制起點.
其中參數 x, y 表示在坐標系中的位置, 分別是 x 坐標與 y 坐標.
(3) lineTo 方法
語法: CanvasRenderingContext2D.lineTo( x, y )
描述:
該方法用於設置需要繪制直線的另一個點. 最終描邊后會連線當前點和方法參數描述的點.
其中參數 x, y 表示在坐標系中的位置, 分別是 x 坐標與 y 坐標.
(4)stroke 方法
語法: CanvasRenderingContext2D.stroke()
描述: 該方法用於連線, 將描述的所有點按照指定順序連接起來.
(5) 結論
a繪圖先要獲得上下文, 即繪圖工具
b繪圖需要設置開始的坐標
c繪圖是先描點, 然后一個一個依次連線
d依次繪圖只能繪制單一樣式( 色彩等 )
5.非零環繞原則
所謂的非零環繞原則是指：內外圖形的繪制其實方向正好相反（一個繪制方向為順時針，一個繪制方向為逆時針），在使用fill()方法時，被填充的就只是內部圖形以外，外部圖形以內部分。
如下圖示例：
分析：
假如我們用+1代表順時針（正方向），用-1來代表逆時針（負方向），則-1+(+1)+(-1)=-1,不等於零，故滿足非零環繞原則，使用fill()方法時，被填充的是小正方形與大正方形中間的部分。
6.閉合路徑closePath
語法: CanvasRenderingContext2D.closePath()
描述: 使用該方法可以將最后一個描點與最開始的描點自動連接起來.
代碼
...
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.lineTo( 300, 200 );
ctx.closePath();
ctx.stroke();
結果為：
7.線型的相關屬性
設置描邊與填充不一定只能使用黑色的細線. 可以利用一些屬性設置其效果
CanvasRenderingContext2D.lineWidth 設置線寬.
CanvasRenderingContext2D.lineCap 設置線末端類型.
CanvasRenderingContext2D.lineJoin 設置相交線的拐點.
CanvasRenderingContext2D.getLineDash() 獲得線段樣式數組.
CanvasRenderingContext2D.setLineDash() 設置線段樣式.
CanvasRenderingContext2D.lineDashOffset 繪制線段偏移量.
7.1.設置線寬
語法: CanvasRenderingContext2D.lineWidth = number
描述: 設置線寬.
代碼：
...
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.moveTo( 100, 250 );
ctx.lineTo( 300, 250 );
ctx.stroke();
效果：
7.2設置線末端類型
語法: CanvasRenderingContext2D.lineCap = value
描述:
設置線型末端的樣式, 可取值為: 'butt'( 默認 ), 'round', 'square'.
'butt' 表示兩端使用方形結束.
'round' 表示兩端使用圓角結束.
'square' 表示突出的圓角結束.
代碼
...
ctx.lineWidth = 10;
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.stroke();
ctx.beginPath();
ctx.lineCap = 'round';
ctx.moveTo( 100, 130 );
ctx.lineTo( 300, 130 );
ctx.stroke();
ctx.beginPath();
ctx.lineCap = 'square';
ctx.moveTo( 100, 160 );
ctx.lineTo( 300, 160 );
ctx.stroke();
效果：
7.3設置相交線的拐點
語法: CanvasRenderingContext2D.lineJoin = value
描述:
設置兩條直線的拐點描述方式. 可以取值 'round', 'bevel', 'miter'(默認)
'round' 使用圓角連接.
'bevel' 使用平切連接.
'miter' 使用直角轉.
代碼 ...
ctx.lineWidth = 10;
ctx.lineJoin = 'round';
ctx.moveTo( 100, 100 );
ctx.lineTo( 200, 200 );
ctx.lineTo( 300, 100 );
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = 'bevel';
ctx.moveTo( 100, 150 );
ctx.lineTo( 200, 250 );
ctx.lineTo( 300, 150 );
ctx.stroke();
ctx.beginPath();
ctx.lineJoin = 'miter';
ctx.moveTo( 100, 200 );
ctx.lineTo( 200, 300 );
ctx.lineTo( 300, 200 );
ctx.stroke();
效果為：
7.4虛線
語法:
CanvasRenderingContext2D.lineDashOffset = number
CanvasRenderingContext2D.getLineDash()
CanvasRenderingContext2D.setLineDash()
描述:
setLineDash 用於設置開始繪制虛線的偏移量. 數字的正負表示左右偏移.
getLineDash() 與 setLineDash() 方法使用數組描述實線與虛線的長度.
代碼
...
ctx.moveTo( 100, 90 );
ctx.lineTo( 100, 110 );
ctx.moveTo( 300, 90 );
ctx.lineTo( 300, 110 );
ctx.moveTo( 100, 140 );
ctx.lineTo( 100, 160 );
ctx.moveTo( 300, 140 );
ctx.lineTo( 300, 160 );
ctx.moveTo( 100, 190 );
ctx.lineTo( 100, 210 );
ctx.moveTo( 300, 190 );
ctx.lineTo( 300, 210 );
ctx.stroke();
ctx.beginPath();
ctx.moveTo( 100, 100 );
ctx.lineTo( 300, 100 );
ctx.stroke();
ctx.beginPath();
ctx.setLineDash( [ 5, 5 ] );
ctx.moveTo( 100, 150 );
ctx.lineTo( 300, 150 );
ctx.stroke();
ctx.beginPath();
ctx.lineDashOffset = -2;
ctx.moveTo( 100, 200 );
ctx.lineTo( 300, 200 );
ctx.stroke();
效果為：
7.5填充與描邊樣式
語法:
CanvasRenderingContext2D.strokeStyle = value
CanvasRenderingContext2D.fillStyle = value
描述:
strokeStyle 可以設置描邊顏色, 與 CSS 的語法一樣
fillStyle 設置填充顏色, 與 CSS 語法一樣
這兩個屬性還可以設置漸變對象.
代碼
for (var i=0;i<6;i++){
for (var j=0;j<6;j++){
ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
Math.floor(255-42.5*j) + ')';
ctx.beginPath();
ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
ctx.stroke();
}
}
效果為：
