小程序开放平台

文档中心
基础
界面
网络
数据缓存
媒体
位置
开放接口
设备
XHSML
性能
文件
数据分析
画布
createCanvasContext
canvasPutImageData
canvasGetImageData
canvasToTempFilePath
CanvasContext
setFillStyle
setStrokeStyle
setShadow
createLinearGradient
createCircularGradient
addColorStop
setLineWidth
setLineCap
setLineJoin
setLineDash
setMiterLimit
rect
fillRect
strokeRect
clearRect
fill
stroke
beginPath
closePath
moveTo
lineTo
arc
scale
rotate
translate
setFontSize
fillText
setTextAlign
setTextBaseline
drawImage
setGlobalAlpha
measureText
strokeText
setLineDashOffset
bezierCurveTo
quadraticCurveTo
save
restore
draw
setTransform

xhs.setTransform

开发
>
JS API
>
画布
>
CanvasContext
>
setTransform
>
更新时间:2024-11-13 19:05:33

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

参数

属性
类型
默认值
必填
说明
最低版本
scaleXNumber水平缩放
skewXNumber水平倾斜
skewYNumber垂直倾斜
scaleYNumber垂直缩放
translateXNumber水平移动
translateYNumber垂直移动

示例代码

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();    
    }
});
该文档是否对您有帮助?