HTML5画布能否在绘制图像后进行缩放？

Question

我的应用程序是基于用户在画布上放置图像(通过我创建的函数使用lineTo()和arc()创建复杂形状)，然后让他们缩小来获得更高级别的图片。同样，他们可以加载其他人的创作并放大以更详细地查看所有这些对象的低级别外观。这种效果是否可行？当我想到缩放时，我想到的是像谷歌地图那样的缩放。如果不可能，是否有其他解决方案，比如使用常规图像并重新调整页面的一部分？感谢任何帮助。

- JDS

Answer 1

您想了解的是：scale（）。

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

- Derek 朕會功夫

---

所以你的意思是每次缩放都要重新绘制形状？编辑 - 当然，我必须删除旧的形状。 - JDS

如果画布中有数百个对象，那似乎效率不高。像谷歌地图这样的东西是如何实现的呢？另外，对于我正在尝试做的事情，您认为手动绘制对象使用lineTo()和arc()更好还是使用小的.png图像更好？谢谢。 - JDS

@YoungMoney - Google Maps并不使用<canvas>来绘制地图。它们直接在DOM中使用图片，并使用CSS来移动图片。顺便说一句，浏览器中重新绘制画布非常快，这就是“动画”的含义——不断改变图片。请参见此处。 - Derek 朕會功夫

非常感谢你，Derek，你提供了很有帮助的信息。我会继续按照我的现有方法进行，并在需要时重新绘制。只是出于好奇，像这样的任务，浏览器会充分利用GPU，对吗？ - JDS

@JDS - 一些浏览器具有GPU加速渲染功能。 - Derek 朕會功夫