调整HTML5 Canvas和内容的大小和缩放

Question

我正在开发一个将绘图界面（如Paint或Photoshop）作为HTML5画布元素的应用程序。

我希望能够动态调整canvas元素及其上的像素数据，以模拟缩放功能。我的想法是有一种包含canvas元素的视口。然后我可以调整画布及其内容在视口内部的大小（保持相同的大小）。

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

Answer 1

通过引入另一个画布，可以通过从绘图表面分离显示来非常轻松地完成此操作。使用

创建隐藏的画布

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

然后将整个场景绘制到此画布。然后使用drawImage方法（也可能接收画布而不是图像）将此画布的内容绘制到用户实际可见的另一个画布。如果要绘制放大的场景，可以通过在{{1}上创建源矩形（sy，sx，sw和sh参数来执行此操作在将它绘制到可视画布上时，在隐藏的画布上更小。这将为您提供缩放效果。

但是，如果你完全重绘画布上的每一帧，你也可以只看一下画布对象的scale method。

Answer 2

我在canvas元素及其内容上使用transform：scale（）取得了成功。 但是，在需要使用iframe引入canvas元素并且在iframe上进行transform：scale的情况下，它适用于safari但不适用于移动safari。

下面的相关链接

https://stackoverflow.com/questions/11265483/inconsistencies-when-transform-scale-on-iframe-containing-canvas