Html5 Canvas學習之路（三）

三：Canvas的繪圖（下）

---

1. 在畫布上的合成

合成是指如何精細控制畫布上對象的透明度和分層效果。有兩個屬性能夠控制合成操做：

• globalAlpha

globalAlpha Canvas屬性用來表示透明度，它的默認值爲1.0（徹底不透明），而且能夠設置從0.0到1.0的值，這項Canvas屬性必須在圖形繪製以前設置。

• globalCompositeOperation

globalCompositeOperation屬性用來顯示分層效果，它的值在globalAlpha以及全部變換都生效後控制在當前canvas位圖中繪製圖形，其值以下：

代碼示例以下：

function compound() {
        context.globalAlpha = .8;
        context.fillStyle = '#000000';
        context.fillRect(200,0,200,200);
        context.fillStyle = '#c70711';
        context.globalAlpha = .9;
        context.globalCompositeOperation = "source-over";
        context.fillRect(180,0,50,50);
        context.fillStyle = '#650ec7';
        context.globalAlpha = .9;
        context.globalCompositeOperation = "destination-over";
        context.fillRect(370,0,50,50);
    }

顯示效果以下：

2. 在畫布上的變換

畫布變換是指用數學方法調整所繪圖形的物理屬性。旋轉和縮放就是經常使用的兩種變換。

1) 旋轉和平移變換

先來看一個概念，變換矩陣。
畫布上的每一個對象都擁有一個當前的變換矩陣。transform() 方法替換當前的變換矩陣，它容許您縮放、旋轉、移動並傾斜當前的環境。。它如下面描述的矩陣來操做當前的變換矩陣：

a  c  e
b  d  f
0  0  1

參數值以下：

代碼以下：

function rotaterect() {
        context.globalAlpha = .6;
        context.transform(1,0.5,-0.5,1,30,10);
        context.fillStyle = '#c70711';
        context.fillRect(180,0,50,50);
    }

效果以下：

2) 縮放變換

可用scale函數進行縮放變換。
scale()函數有兩個參數，第一個是x軸的縮放屬性，第二個是y軸的縮放屬性，正常對象縮放大小的數值都爲1。

代碼示例：

function scalerect() {
        context.globalAlpha = .6;
        context.scale(2,2);
        context.fillStyle = '#c70711';
        context.fillRect(80,0,50,50);
    }

顯示結果：