放大HTML5 Canvas

Question

我需要一些关于如何设置放大和缩小HTML5 JavaScript画布的建议。我有函数和switch语句设置只需要有关如何实际启用缩放的建议。

我正在考虑让它使用浏览器缩放功能，因为我只需要它在Chrome上运行。这是推荐的吗？

由于

Answer 1

只需使用ctx.scale(x, y)

即可

以下是MDN上的direct link，但我建议您阅读整篇文章。

Answer 2

您可以使用浏览器的缩放在画布中缩放，但只需要警告画布是光栅图像，因此放大会引入锯齿（锯齿）。我还没有看到一种在没有锯齿的情况下在放大的画布上绘制的方法（即画布像素大于显示像素）。事实证明，你甚至很难弄清楚你放大了多少：How to detect page zoom level in all modern browsers?

但是，如果您通过重绘某些事件进行缩放，即使使用ctx.scale(x, y)作为@rezoner points out，而不是允许浏览器进行缩放，那么您仍然可以在没有别名的情况下进行绘制。为了实现平滑缩放，我建议使用scale作为快速缩放，同时使用快速缩放，并且每1.3倍左右执行完全重绘，并在它们停止缩放时再次执行。这应该会给你一些像谷歌地图的行为，你可以立即得到一个粗略的缩放（良好的响应），但它会在你继续缩放时更新视图。