Html5 Canvas 學習之路（二）

二：Canvas的繪圖（上）

---

1. 概述

Canvas具備強大的繪圖功能，能夠經過Javascript控制其上下文對象進行繪圖。

2. 基本矩形

在Canvas上，繪製基本矩形有三種方式：填充、描邊、清楚。
三種API以下：

• fillRect(x,y,width,height);

在位置（x,y）處以寬width、高爲height繪製一個填充的矩形。

• strokeRect(x,y,width,height);

在位置（x,y）處以寬width、高爲height繪製一個矩形邊框，
須要使用當前的strokeStyle,lineWidth,lineJoin以及miterLimit設置。

• clearRect(x,y,width,height);

在位置x,y處以寬爲width,高爲height，清楚指定區域並使其徹底透明。

而後畫幾個矩形，代碼以下：

function rect(x,y,w,h) {

        context.lineWidth = 2;
        context.strokeStyle = '#000000';
        context.strokeRect(x,y,w,h);
    }
    function manyrect() {
        var i=0,j=0;
        do {
            rect(i,j,250-4*i,250-4*j);
            i = i + 5;
            j = j + 5;
        }while (i<=125);
        context.fillStyle = '#000001';

顯示結果以下：

3. Canvas狀態

在 Canvas 上下文中繪圖時能夠利用所謂的繪圖堆棧狀態。每一個狀態隨時存儲 Canvas 上下文數據。下面是存儲在狀態堆棧的數據列表：

• 變換矩陣信息 。
• 當前剪貼區域 。
• 畫布屬性當前值 。

當前路徑和當前位圖受Canvas上下文控制，不屬於保存的狀態。

將一個繪圖狀態進行壓棧和出棧有兩種方法，以下：

• context.save() //保存當前狀態到堆棧。
• context.restore() //調出最後存儲的堆棧恢復畫布。

4. 使用路徑建立線段

路徑能夠用來在畫布上繪製任何形狀。路徑就是一系列點以及這些點之間的連線。Canvas上下文只能有一個 「當前」 路徑，當調用context()方法時，不會將它存儲爲當前繪圖狀態的一部分。

路徑的上下文是一個重要概念，它決定了只能變換畫布上的當前路徑。

調用beginPath()函數開始一個路徑，調用closePath()函數結束一個路徑。

基本的路徑經過以下兩個方法控制：

• moveTo()
• lineTo()

直線還能夠設置不一樣的屬性，具體以下：

lineCap 屬性。

定義上下文中線的端點，能夠有如下三個值。

• butt。 默認值，端點是垂直於線段邊緣的平直邊緣。
• round。 端點是在線段邊緣處以線寬爲直徑的半圓。
• square。端點是在選段邊緣處以線寬爲長、以一半線寬爲寬的矩形。

lineJoin 屬性。

定義兩條線相交處產生的拐角，稱爲鏈接。在鏈接處建立一個填充三角形，能夠使用lineJoin設置它的基本屬性。

• miter。默認值，在鏈接處邊緣延長相接。miterLimit是角長和線寬
  所容許的最大比例（默認值爲 10）。
• bevel。鏈接處是一個對角線斜角。
• round。鏈接處是一個圓。

線寬
lineWidth定義線的寬度（默認值爲10）。

筆觸樣式
strokeStyle定義線和形狀邊框的顏色和樣式。

畫一個簡單的直線，代碼以下：

function line() {
        context.lineWidth = 10;
        context.beginPath();
        context.moveTo(0,0);
        context.lineTo(100,0);
        context.lineTo(100,100);
        context.stroke();
        context.closePath();
    }

顯示結果以下：

5. 弧線與曲線（補充）

有兩種函數能夠繪製弧線，以下：

• context,arc(x,y,radius,startAngle,endAngle, anticlockwise);

x,y定義圓心的位置，radius定義弧線的半徑。startAngele和endAngle使用弧度值而不是角度值。anticlockwise能夠是true或false這兩個值，用於定義弧線的方向。

• context.arcTo(x1,y1,x2,y2,radius);

只有一些最新的瀏覽器支持arcTo方法，這個函數以給定的半徑繪製一條弧線，圓弧的起點與當前路徑的位置到（x1,y1）點的直線相切，圓弧的終點與(x1,y1)點到（x2,y2）的直線相切。

context.arcTo 方法要求當前路徑至少有一個子路徑。

貝塞爾曲線要比弧線靈活的多，它有立方和平方兩種形式，以下：

• context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)；
• context.quadraticCurveTo(cpx,cpy,x,y);

Canvas裁剪區域：

結合save()函數和restore函數，Canvas裁剪區域能夠限制路徑及其子路徑的繪製區域，首先經過rect()函數設置一個用來繪圖的矩形區域，而後調用clip()函數把用rect（）函數定義的區域設置爲裁剪區域。裁剪區域能夠理解爲繪圖操做的一種蒙版。