当前位置：文江博客话题详情

调整 HTML5 Canvas 和内容的大小和比例

发布于 2024-11-29 07:36:46 字数 171 浏览 0 评论 0原文

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

西瑶 2024-12-06 07:36:46

通过引入另一个画布将显示与绘图表面分开，您可以非常轻松地做到这一点。使用创建隐藏画布

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

然后将整个场景绘制到此画布上。然后使用drawImage方法将此画布的内容绘制到用户实际可见的另一个画布上（该方法也可能接收画布而不是图像）。如果您想放大绘制场景，可以通过制作源矩形（sy、sx、sw 和 sw 来完成此操作将隐藏画布绘制到可视画布时，drawImage 上的 >sh 参数会使其变小。这会给你缩放效果。

但是，如果您完全重绘画布上的每个框架，您也可以简单地查看画布对象的scale方法。

You can do this very easily by seperating the display from the drawing surface by introducing another canvas. Create a hidden canvas using

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

Then draw your entire scene to this canvas. Then draw the contents of this canvas to another canvas that is actually visible to the user using the drawImage method (which may also receive a canvas instead of an image). If you want to draw your scene zoomed in, you can do this by making the source rectangle (the sy, sx, sw and sh parameters on drawImage) on the hidden canvas smaller, when drawing it to the visual canvas. This will give you the zooming effect.

However, if you completely redraw each frame on your canvas anyway, you may also simply have a look at the scale method of the canvas object.

回复收藏 0 原文