HTML5 Canvas 能够在绘制图像后放大/缩小吗？答案

【问题标题】：HTML5 Canvas ability to zoom in/out after drawing images?HTML5 Canvas 能够在绘制图像后放大/缩小吗？
【发布时间】：2012-06-03 20:12:23
【问题描述】：

我的应用基于用户将图像放置在画布上（通过我创建的函数，这些函数使用 lineTo() 和 arc() 创建复杂的形状），然后让它们缩小，以便获得更高层次的图像已经完成了。类似地，他们可以加载其他人的创建并放大以在较低级别查看所有这些对象的详细外观。

这可能吗？当我想到缩放时，我在想谷歌地图类型的缩放。

如果不可能，是否有其他解决方案，例如使用常规图像和调整部分页面的大小？

感谢您的帮助。

【问题讨论】：

【解决方案1】：

所以这就是你的想法：scale()。

ctx.save();
ctx.scale(2,2);    //zoom-in
doMyComplexShape();
ctx.restore();

【讨论】：

所以你的意思是每次缩放我都必须完全重新绘制形状？编辑 - 当然我必须删除旧的形状
如果我在画布中有数百个对象，这似乎效率低下。谷歌地图之类的东西是如何做到的？另外，对于我正在尝试做的事情，您是否说最好通过 lineTo() 和 arc() 手动处理绘图对象或使用小的 .png 图像？谢谢。
@YoungMoney - Google 地图未使用 <canvas> 绘制地图。他们直接在 DOM 中使用图像，并使用 CSS 来移动它们。 PS：在浏览器中重绘画布非常快。这就是“动画”的意思——不断变化的画面。见here。
非常感谢 Derek，您非常乐于助人。我将继续沿用我目前的方法并根据需要重新绘制。只是出于好奇，浏览器会大量使用 GPU 来完成这样的任务，对吧？
@JDS - 一些浏览器具有 GPU 加速渲染。