本文共 1046 字，大约阅读时间需要 3 分钟。

使用 scale() 方法可以缩放当前绘图。语法：context.scale(scalewidth,scaleheight);。

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);

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);

运行结果：

每次绘制时，都必须指定原点，否则都会从左上角作为默认原点。

转载地址：https://deniro.blog.csdn.net/article/details/108180001 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！