调整HTML5 Canvas和内容的大小和缩放 [英] Resize and scale HTML5 Canvas and contents

问题描述

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

I am working on an application that incorporates a drawing interface (like Paint or Photoshop) as an HTML5 canvas element.

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

I would like to be able to dynamically resize the canvas element and the pixel data on it to simulate zoom functionality. My thoughts are having some kind of a viewport which contains the canvas element. I could then resize the canvas and its contents inside of the viewport (which stays the same size).

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

How would I best implement this functionality?

推荐答案

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

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');

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

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.

但是，如果你完全重绘画布上的每一帧，你也可以简单地看一下 缩放 canvas对象的方法。

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.

这篇关于调整HTML5 Canvas和内容的大小和缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！