CanvasContext.transform

簡(jiǎn)介

CanvasContext.transform 是使用矩陣多次疊加當(dāng)前變換的方法，矩陣由方法的參數(shù)進(jìn)行描述。可以縮放、旋轉(zhuǎn)、移動(dòng)和傾斜上下文。

掃碼體驗(yàn)

效果示例

示例代碼

//.js
const ctx = my.createCanvasContext('canvas')


ctx.rotate(45 * Math.PI / 180)
ctx.setFillStyle('red')
ctx.fillRect(70,0,100,30)


ctx.transform(1, 1, 0, 1, 0, 0)
ctx.setFillStyle('#000')
ctx.fillRect(0, 0, 100, 100)


ctx.draw()

顯示效果如下圖所示：

入?yún)?/h4>

Object 類(lèi)型，屬性如下：

屬性	類(lèi)型	描述
scaleX	Number	水平縮放。
skewX	Number	水平傾斜。
skewY	Number	垂直傾斜。
scaleY	Number	垂直縮放。
translateX	Number	水平移動(dòng)。
translateY	Number	垂直移動(dòng)。