我正在开发一个应用程序，它将绘图界面（如 Paint 或 Photoshop）合并为 HTML5 画布元素。
我希望能够动态调整画布元素及其像素数据的大小以模拟缩放功能。我的想法是拥有某种包含画布元素的视口。然后我可以调整画布及其在视口内的内容的大小（保持相同的大小）。
我如何最好地实现此功能？
您可以通过引入另一个画布将显示与绘图表面分开来非常轻松地做到这一点。使用创建隐藏画布
var canvas = document.createElement('canvas');
然后将整个场景绘制到此画布上。然后使用以下命令将此画布的内容绘制到用户实际可见的另一个画布上drawImage方法（也可能接收画布而不是图像）。如果您想放大绘制场景，可以通过制作源矩形（sy, sx, sw and sh参数上drawImage）将隐藏画布绘制到可视画布时较小。这会给你缩放效果。
但是，如果您完全重新绘制画布上的每个帧，您也可以简单地看一下scale method http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-scale画布对象的。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
