CanvasContext.setTransform

2020-08-26 16:41 更新

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

方法参数

属性名类型必填默认值说明

scaleX

Number

水平缩放

skewX

Number

水平倾斜

skewY

Number

垂直倾斜

scaleY

Number

垂直缩放

translateX

Number

水平移动

translateY

Number

垂直移动

示例 

在开发者工具中打开



图片示例

代码示例

<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()方法的唯一区别是setTransform()方法会重置前面的矩阵,然后再绘制出一个新的矩阵;transform()方法则不会重置前面的矩阵,而是在前面的基础上继续进行缩放、位移或者旋转。
        canvasContext.draw();
    }
});


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号