CanvasContext.setTransform

解释:使用矩阵重新设置(覆盖)当前变换的方法。

# 方法参数

属性名 类型 必填 默认值 说明
scaleX Number 水平缩放
skewX Number 水平倾斜
skewY Number 垂直倾斜
scaleY Number 垂直缩放
translateX Number 水平移动
translateY Number 垂直移动

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 图片示例

# 代码示例

    Page({
        onReady: function () {
            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()方法的唯一区别是setTransform()方法会重置前面的矩阵,然后再绘制出一个新的矩阵;transform()方法则不会重置前面的矩阵,而是在前面的基础上继续进行缩放、位移或者旋转。放开注释,则会看到两个蓝色矩形
            // canvasContext.setFillStyle('blue');
            // canvasContext.fillRect(30, 30, 150, 75);
            canvasContext.draw();
        }
    });