canvascontextpattern.settransform(object matrix)
若版本较低或需要适配多个客户端,建议采取 兼容处理 。
基础库 2.9.79 或更高版本;
支小宝客户端 支持
安诊儿客户端 支持
主体: 企业支付宝小程序 、 个人支付宝小程序
设置变换矩阵。
object matrix
查看示例
属性 | 类型 | 默认值 | 必填 | 描述 |
---|---|---|---|---|
a | number | 1 | 否 | 水平缩放。 |
b | number | 0 | 否 | 垂直倾斜。 |
c | number | 0 | 否 | 水平倾斜。 |
d | number | 1 | 否 | 垂直缩放。 |
e | number | 0 | 否 | 水平移动。 |
f | number | 0 | 否 | 垂直移动。 |
代码示例
.js
.axml
page({
onready() {
const context = my.createcanvascontext('canvas')
// 创建图案
const parttern = context.createpattern('https://mdn.alipayobjects.com/huamei_esgcm9/afts/img/a*obkbr4bfxbeaaaaaaaaaaaaadsajaq/original', 'repeat')
const matrix = {
a: 1,
b: 0.2,
c: 0.8,
d: 1,
e: 0,
f: 0,
}
parttern.settransform(matrix)
// 填充图案
context.setfillstyle(parttern)
context.fillrect(0, 0, 400, 400)
context.draw()
}
})
<canvas id="canvas">canvas>