canvasrenderingcontext2d.transform(number scalex, number skewy, number skewx, number scaley, number translatex, number translatey)
基础库 或更高版本； 若版本较低，建议采取 兼容处理。
主体： 企业支付宝小程序 、 个人支付宝小程序
使用矩阵在当前变换基础之上叠加变换
变换矩阵的描述：
要直接设置(覆盖)变换，可使用 canvasrenderingcontext2d.settransform。
效果示例
修改属性后的效果
number scalex
水平缩放。
number skewy
垂直倾斜。
number skewx
水平倾斜。
number scaley
垂直缩放。
number translatex
水平移动。
number translatey
垂直移动。
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.font = '30px sans-serif'
ctx.linewidth = 2
// 没有变换
ctx.strokestyle ='black'
ctx.strokerect(0, 0, 100, 100)
// 添加变换
ctx.transform(1, 0.2, 0.5, 1, 0, 0)
ctx.strokestyle ='red'
ctx.strokerect(0, 0, 100, 100)
// 在当前变换基础上再次叠加变换
ctx.transform(1, 0.2, 0.5, 1, 0, 0)
ctx.strokestyle ='green'
ctx.strokerect(0, 0, 100, 100)
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>