在画布上放大和缩小
我使用 HTML5 canvas 元素编写了一个绘画应用程序。
现在我想为用户提供在绘画时放大和缩小的选项。
我该怎么做？
I wrote a paint application using the HTML5 canvas element.
Now I want to give the user an option to zoom in and out while painting.
How can I do this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
有几种方法。这实际上取决于您正在寻找什么。
您可以通过缩放整个上下文来实现此目的，如 ctx.scale(2,2) 中所示，然后以更大的比例重新绘制所有内容。绘制的一些内容（例如路径和文本）将优雅地缩放。为了实现这一点，您需要很好地跟踪迄今为止绘制的所有内容。
另一种方法是获取整个画布并将其拉回自身。这需要一个临时画布，因为操作实际上是：绘制到临时画布，清除主画布，绘制回缩放后的主画布。
另一种方法是使用 CSS 变换来仅缩放画布本身，这将使图像变得模糊（缩放后！），但不需要更改画布上已有的任何像素。
There are a few ways. It really depends on what you're looking for.
You could do it by scaling the entire context, as in
ctx.scale(2,2), and then redrawing everything at this larger scale. Several things drawn, like paths and text, will scale gracefully. To accomplish this you will need to keep good track of everything drawn so far.Another way is to take the entire canvas and draw it back to itself. This requires a temporary canvas because the operation is really: Draw to temp canvas, clear main, draw back to main scaled.
Another way is to use CSS transforms to merely zoom the canvas itself, which will make the image blurry (its zoomed!) but does not require changing any of the pixels already on the canvas.