canvas畫圖——初級篇

         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();

        }

    }

效果爲：