canvaspattern.settransform(object matrix)
基础库 或更高版本， 且 支付宝客户端 10.5.26 或更高版本。 若版本较低，建议采取 兼容处理。
主体： 企业支付宝小程序 、 个人支付宝小程序
设置变换矩阵。
效果示例
变换效果
变换前
变换后
object matrix
查看示例
| 属性 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| a | number | 1 | 否 | 水平缩放。 |
| b | number | 0 | 否 | 垂直倾斜。 |
| c | number | 0 | 否 | 水平倾斜。 |
| d | number | 1 | 否 | 垂直缩放。 |
| e | number | 0 | 否 | 水平移动。 |
| f | number | 0 | 否 | 垂直移动。 |
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
const img = canvas.createimage()
img.src = 'https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*obkbr4bfxbeaaaaaaaaaaaaadsajaq/original'
img.onload = () => {
const pattern = ctx.createpattern(img, 'repeat')
const matrix = {
a: 1,
b: 0.2,
c: 0.8,
d: 1,
e: 0,
f: 0,
}
pattern.settransform(matrix)
ctx.fillstyle = pattern
ctx.fillrect(0, 0, 400, 400)
}
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>