使用 scale() 方法可以缩放当前绘图。语法:context.scale(scalewidth,scaleheight);
。
参数 | 描述 |
---|---|
scalewidth | 缩放当前绘图的宽度 (1=100%, 0.5=50%, 2=200%, 依次类推) |
scaleheight | 缩放当前绘图的高度 (1=100%, 0.5=50%, 2=200%, 依次类推) |
context.strokeRect(5,5,25,15);
context.scale(2,2);
context.strokeRect(5,5,25,15);
context.scale(2,2);
context.strokeRect(5,5,25,15);
context.scale(2,2);
context.strokeRect(5,5,25,15);
运行结果:
可以看出,Canvas 缩放的方式与旋转差不多。因为我们没有平移原点就对长方形进行缩放,所以 Canvas 仍然使用画布左上角来作为画布的原点,所以每次放大后的正方形都移动到了右下方。
如果需要从长方形的中心点进行缩放,就必须在缩放之前先将原点平移到长方形的中心。
translate() 方法可以重新指定画布上的原点 (0,0) 位置。语法:context.translate(x,y);
参数 | 描述 |
---|---|
x | 新原点的水平坐标(x) |
y | 新原点的垂直坐标(y) |
const width = 25;
const height = 15;
context.translate(100+.5*width,100+.5*height);
context.strokeRect(5,5,width,height);
context.translate(-5-.5*width,-5-.5*height);
context.scale(2,2);
context.strokeRect(5,5,width,height);
context.translate(-5-.5*width,-5-.5*height);
context.scale(2,2);
context.strokeRect(5,5,width,height);
context.translate(-5-.5*width,-5-.5*height);
context.scale(2,2);
context.strokeRect(5,5,width,height);
运行结果:
每次绘制时,都必须指定原点,否则都会从左上角作为默认原点。