canvascontext.transform(number scalex, number skewy, number skewx, number scaley, number translatex, number translatey)
主体: 企业支付宝小程序 、 个人支付宝小程序
相关文档: 旧版 canvas 迁移指南
canvascontext.transform 使用矩阵叠加当前变换。矩阵由方法的参数进行描述,可以缩放、旋转、移动和倾斜上下文。
变换矩阵的描述:
number scalex
水平缩放。
number skewy
垂直倾斜。
number skewx
水平倾斜。
number scaley
垂直缩放。
number translatex
水平移动。
number translatey
垂直移动。
.js
.axml
const ctx = my.createcanvascontext('canvas');
ctx.setlinewidth(2)
// 没有变换
ctx.setstrokestyle('black')
ctx.strokerect(0, 0, 100, 100);
// 添加变换
ctx.transform(1, 0.2, 0.5, 1, 0, 0);
ctx.setstrokestyle('red')
ctx.strokerect(0, 0, 100, 100);
// 在当前变换基础上再次叠加变换
ctx.transform(1, 0.2, 0.5, 1, 0, 0);
ctx.setstrokestyle('green')
ctx.strokerect(0, 0, 100, 100);
ctx.draw();
代码示例执行效果
<canvas id="canvas"></canvas>
- tip
此方法会在当前变换基础之上叠加变换。要直接设置变换,可使用 。