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

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

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

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