HTML5 canvas基本繪圖之圖形變換

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b是HTML5中新增的標籤，用於繪製圖形，實際上，這個標籤和其他的標籤一樣，其特殊之處在於該標籤可以取得一個CanvasRenderingContext2D對象，我們可以透過JavaScript腳本來控制該物件進行繪圖。

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b只是一個繪製圖形的容器，除了id、class、style等屬性外，還有height和width屬性。在5ba626b379994d53f7acf72a64f9b697>元素上繪圖主要有三步：

1. 取得5ba626b379994d53f7acf72a64f9b697元素對應的DOM對象，這是一個Canvas物件；
2.呼叫Canvas物件的getContext( )方法，得到一個CanvasRenderingContext2D物件；
3.呼叫CanvasRenderingContext2D物件進行繪圖。

圖形轉換

平移：context.translate(x,y)，接收參數分別為原點在x軸方向平移x，在y軸方向平移y。

縮放：context.scale(x,y)，接收參數分別為x座標軸以x比例縮放，y座標軸以y比例縮放。

旋轉：context.rotate(angle)，接收參數是座標軸旋轉的角度。

需要說明的是，對圖形進行變更後，接下來的一次繪圖是緊接著上一次的狀態的，所以如果需要回到初始狀態，要用到context.save();和context .restore();來儲存並還原目前狀態:

var canvas = document.getElementById("canvas");   

    var context = canvas.getContext("2d");   

      

    //translate()   

    context.save();   

    context.fillStyle = "#1424DE";   

    context.translate(10,10);   

    context.fillRect(0,0,200,200);   

    context.restore();   

      

    //scale()   

    context.save();   

    context.fillStyle = "#F5270B";   

    context.scale(0.5,0.5);   

    context.fillRect(500,50,200,200);   

    context.restore();   

    //rotate()   

      

    context.save();   

    context.fillStyle = "#18EB0F";   

    context.rotate(Math.PI / 4);   

    context.fillRect(300,10,200,200);   

    context.restore();

#效果如下：


##另外一個跟圖形變換相關的是：矩陣變換：context.transform(a, b, c, d, e, f, g)。參數的意義如下：

a 水平縮放( 預設為1 )
b 水平傾斜( 預設為0 )
c 垂直傾斜( 預設為0 )
d 垂直縮放( 預設為1 )
e 水平位移( 預設為0 )
f 垂直位移( 預設為0 )

讀者可以自行驗證其各個參數的效果，這裡就不一一介紹了。

 以上是HTML5 canvas基本繪圖之圖形轉換 的內容，更多相關內容請關注PHP中文網（www.php.cn）！