變換

Canvas中的“變形”，主要指的是座標系的變換，而不是路徑的變換。這與 QML 元素變換非常相似，都可以實現座標系統的scale（縮放）、rotate（旋轉）和translate（平移）；不同的是，變換的原點是畫布原點。例如，如果以一個路徑的中心點為定點進行縮放，那麼，你需要現將畫布原點移動到路徑中心點。我們也可以使用變換函式實現複雜的變換。理解“變換是針對座標系的”這一點非常重要，有時候可以避免很多意外的結果。

1234567891011121314151617181920

import QtQuick2.0Canvas{id:rootwidth:240;height :120onPaint:{varctx=getContext("2d")ctx.strokeStyle="blue"ctx.lineWidth=4ctx.translate(120,60)ctx.strokeRect(-20,-20,40,40)// draw path now rotatedctx.strokeStyle="green"ctx.rotate(Math.PI/4)ctx.strokeRect(-20,-20,40,40)ctx.restore()}}

執行結果如下：

通過呼叫resetTransform()函式，可以將變換矩陣重置為單位矩陣：

1	ctx.resetTransform ()

組合

組合意思是，將你繪製的圖形與已存在的畫素做一些融合操作。canvas支援幾種組合方式，使用globalCompositeOperation可以設定組合的模式。如下程式碼所示，我們可以看到組合的相應表現：