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

Question

我正在开发一个应用程序,它将绘图界面(如Paint或Photoshop)作为HTML5画布元素.

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

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

Answer 1

通过引入另一个画布,可以通过从绘图表面分离显示来非常轻松地完成此操作.使用创建隐藏的画布

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

然后将整个场景绘制到此画布.然后将此画布的内容绘制到另一个使用该drawImage方法对用户可见的画布(也可能接收画布而不是图像).如果你想画场景放大时,您可以通过使源矩形(做到这一点sy,sx,sw并sh在参数drawImage隐藏的画布上更小),它画到画布上的视觉时.这将为您提供缩放效果.

但是,如果您无论如何完全重绘画布上的每个帧,您也可以简单地查看画布对象的scale方法.