canvasrenderingcontext2d.scale(number x, number y)
基础库 或更高版本； 若版本较低，建议采取 兼容处理。
主体： 企业支付宝小程序 、 个人支付宝小程序
为画布添加缩放变换，影响接下来绘制的内容。多次调用此接口，缩放倍数会相乘。
默认情况下，画布中的一个单位实际大小为一个像素。缩放变换会改变一个单位的大小。例如，canvasrenderingcontext2d.scale(2, 2)会将画布的单位同时在垂直和水平方向上放大 2 倍，此时画布中的一个单位的大小为 2 像素，之后绘制内容的大小将变为默认情况的两倍。
效果示例
代码示例运行效果
number x
横向缩放倍数 (0.5 = 50%，1 = 100%，2 = 200%)。负值会沿 y 轴翻转像素。
number y
纵向缩放倍数 (0.5 = 50%，1 = 100%，2 = 200%)。负值会沿 x 轴翻转像素。
一般使用
沿 y 轴翻转
沿 x 轴翻转
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.font = '48px serif'
ctx.strokerect(10, 10, 30, 20)
ctx.scale(2, 2)
ctx.strokerect(10, 10, 30, 20)
ctx.scale(2, 2)
ctx.strokerect(10, 10, 30, 20)
})
}
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.font = '48px serif'
// 移动坐标系，使负半轴与正半轴各占屏幕的一半
ctx.translate(150, 10)
ctx.moveto(0, 0)
ctx.lineto(0, 300)
ctx.moveto(-150, 0)
ctx.lineto(150, 0)
ctx.stroke()
// 绘制文字
ctx.filltext('hello', 10, 90)
// 翻转
ctx.scale(-1, 1)
// 在同样的坐标绘制文字
ctx.filltext('hello', 10, 90)
})
}
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>代码示例执行效果
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
ctx.font = '48px serif'
// 移动坐标系，使负半轴与正半轴各占屏幕的一半
ctx.translate(0, 120)
ctx.moveto(0, 0)
ctx.lineto(0, 300)
ctx.moveto(-150, 0)
ctx.lineto(150, 0)
ctx.stroke()
// 绘制文字
ctx.filltext('hello', 10, 90)
// 翻转
ctx.scale(1, -1)
// 在同样的坐标绘制文字
ctx.filltext('hello', 10, 90)
})
}
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>代码示例执行效果