CanvasContext.setTransform

2020-08-26 16:41 更新

解釋:使用矩陣重新設(shè)置(覆蓋)當(dāng)前變換的方法。

方法參數(shù)

屬性名類型必填默認(rèn)值說明

scaleX

Number

水平縮放

skewX

Number

水平傾斜

skewY

Number

垂直傾斜

scaleY

Number

垂直縮放

translateX

Number

水平移動

translateY

Number

垂直移動

示例 

在開發(fā)者工具中打開



圖片示例

代碼示例

<canvas canvas-id="myCanvas" class="myCanvas" />
Page({
    onLoad() {
        const canvasContext = this.createCanvasContext('myCanvas');
        canvasContext.setFillStyle('blue');
        canvasContext.fillRect(30, 30, 150, 75);
        canvasContext.setTransform(1, 0.5, -0.5, 1, 30, 10);
        canvasContext.setFillStyle('red');
        canvasContext.fillRect(30, 30, 150, 75);
        canvasContext.setTransform(1, 0.5, -0.5, 1, 30, 10);
        //此方法與transform()方法的唯一區(qū)別是setTransform()方法會重置前面的矩陣,然后再繪制出一個新的矩陣;transform()方法則不會重置前面的矩陣,而是在前面的基礎(chǔ)上繼續(xù)進(jìn)行縮放、位移或者旋轉(zhuǎn)。
        canvasContext.draw();
    }
});


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號