html5 canvas常用api總結(三)--圖像變換API

本文轉載自查看原文 2017-01-02 23:50 1510 canvas

canvas的圖像變換api，可以幫助我們更加方便的繪畫出一些酷炫的效果，也可以用來制作動畫。接下來將總結一下canvas的變換方法，文末有一個例子來更加深刻的了解和利用這幾個api。

1.畫布旋轉api

這里要先了解另一個api

translate(x,y):重新定義畫布上（0，0）的位置。

首先定義一個旋轉的角度a,比如想要旋轉45度。

a=45*Math.PI/180

rotate(a):rotate的旋轉參數是弧度。注意，旋轉之前要先設定旋轉的中心點。

function cxt_rotate() {
        var ctx = document.getElementById("trascanvas0").getContext("2d");
        ctx.save();
        ctx.fillStyle="#396";
        var angle=-45*Math.PI/180;
        ctx.translate(150,150);//定義中心點
        ctx.rotate(angle);//旋轉
        ctx.fillRect(-75,-50,100,100);//畫圖
        ctx.restore();
};

這里要注意，rotate函數寫了之后，才會旋轉，如果提前畫圖，再寫rotate會發現並沒有什么卵用……

畫圖的時候，由於我們重新定義了（0，0）點，所有我們畫圖的時候，起始點要減去長和寬的一半。

2.平移api

translate(x,y):第一個參數是X軸的平移大小，第二個參數是Y軸的平移大小。

function cxt_translate() {
        var ctx = document.getElementById("trascanvas1").getContext("2d");
        ctx.fillStyle="#987";
        ctx.translate(100,200);
        ctx.fillRect(0,0,50,100);

};

translate這個api講回話遠點移動到參數的位置，把這里當做（0，0）開始回話，經常用在放大縮小，旋轉等變換中設置中心點。

2.縮放api

scale(x,y):第一個參數是X軸的縮放值，第二個參數是Y軸的縮放值。

function cxt_scale() {
        var ctx = document.getElementById("trascanvas2").getContext("2d");
        ctx.fillStyle="#666";
        ctx.fillRect(0,0,100,100);
        ctx.fillStyle="#693";
        ctx.scale(2,2);
        ctx.globalCompositeOperation ="destination-atop";//合成
        ctx.fillRect(0,0,100,100);
        
};

圖中灰色的圖是正常大小，綠色的是經過scale放大的。

注意：代碼中globalCompositeOperation這個api是用來處理兩個圖之間的合成關系的。

3.變換矩陣transform&setTransform

context.transform(a,b,c,d,e,f):

context.setTransform(a,b,c,d,e,f):

a:水平縮放，b：水平傾斜，c：垂直傾斜，d：垂直縮放，e：水平位移，f：垂直移動

當圖經過了很多次變換之后，我們可以在變換的前后使用save()&restore()來保存狀態，或者直接在變換前使用setTransform(1,0,0,1,0,0)來重置畫布。

function cxt_transform() {
        var ctx = document.getElementById("trascanvas3").getContext("2d");
        ctx.save();
        ctx.fillStyle="yellow";
        ctx.fillRect(0,0,250,100)

        ctx.setTransform(1,0.5,-0.5,1,30,10);
        ctx.fillStyle="red";
        ctx.fillRect(0,0,250,100);

        ctx.transform(1,0.5,-0.5,1,30,10);
        ctx.fillStyle="blue";
        ctx.fillRect(0,0,250,100);

        ctx.restore();
        //ctx.setTransform(1,0,0,1,0,0);

        ctx.fillStyle="yellow";
        ctx.translate(300,0);
        ctx.fillRect(0,0,250,100);

};