javascript - 调整和缩放 HTML5 Canvas 和内容

Question

我正在开发一个将绘图界面(如 Paint 或 Photoshop)合并为 HTML5 canvas 元素的应用程序。

我希望能够动态调整 Canvas 元素及其上的像素数据的大小，以模拟缩放功能。我的想法是拥有某种包含 Canvas 元素的视口(viewport)。然后我可以在视口(viewport)内调整 Canvas 及其内容的大小(保持相同大小)。

我如何最好地实现此功能？

Answer 1

您可以通过引入另一个 Canvas 将显示与绘图表面分开，从而非常轻松地做到这一点。使用

创建一个隐藏的 Canvas

var canvas = document.createElement('canvas');

然后将整个场景绘制到此 Canvas 上。然后使用 drawImage 将此 Canvas 的内容绘制到用户实际可见的另一个 Canvas 上。方法(也可能接收 Canvas 而不是图像)。如果你想绘制放大的场景，你可以通过在绘制时使隐藏 Canvas 上的源矩形(sy，sx，sw和sh参数在drawImage上变小)来实现它到视觉 Canvas 。这将为您提供缩放效果。

但是，如果您无论如何都在 Canvas 上完全重绘每一帧，您也可以简单地看一下 scale method Canvas 对象。