CanvasContext.transform

简介

CanvasContext.transform 是使用矩阵多次叠加当前变换的方法，矩阵由方法的参数进行描述。可以缩放、旋转、移动和倾斜上下文。

扫码体验

undefined

效果示例

画布.gif

示例代码

//.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()

显示效果如下图所示：

入参

Object 类型，属性如下：

属性	类型	描述
scaleX	Number	水平缩放。
skewX	Number	水平倾斜。
skewY	Number	垂直倾斜。
scaleY	Number	垂直缩放。
translateX	Number	水平移动。
translateY	Number	垂直移动。