全部产品

CanvasContext.transform

使用矩阵自由变换,矩阵由方法的参数进行描述。可以缩放、旋转、移动和倾斜上下文。

入参

Object 类型,属性如下:

属性

类型

说明

scaleX

Number

水平缩放。

skewX

Number

水平倾斜。

skewY

Number

垂直倾斜。

scaleY

Number

垂直缩放。

translateX

Number

水平移动。

translateY

Number

垂直移动。

示例代码

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

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

显示效果如下图所示:

image