提示加快我的画布应用程序

Question

这是关于WEB开发，Canvas，HTML5。

我正在使用HTML5 Canvas和JQuery开发一个绘图应用程序。您可以绘制多个图层，并获得具有放大镜效果的动态缩放。

架构是多个画布：

背景：

• 画布-BG

图层：

• 层0

• 层1

• 二层

...

• layerN

工具：

• ghost（当用户想要绘制一条线时显示“ghost”行。释放鼠标确认绘制）

• 放大层

我的问题是变焦。为了获得我想要的效果，我重新绘制放大图层上的所有图层。当然，当你绘制2000 * 2000的图片时，它非常慢。更确切地说，您可以将放大镜移动到任何地方进行缩放，并在MouseMoveEvent上重新调用重绘。

为了加快速度，我只画了玻璃下面的小区域（而不是整个图层）。但它仍然很慢。我怎样才能加快知道？

插图：http://imgur.com/hAtYsZi

您可以在黑色圆圈中看到该区域已缩放。 我用这段代码开始：

Démo：http://www.script-tutorials.com/demos/167/index.html

Answer 1

试试这个......这可能会有所帮助。

我猜你正在做传统的“放大”：你以降低的分辨率显示，然后以全分辨率“放大”。

因此，当用户选择放大镜工具时，将所有图层“压平”到另一个画布上。

然后将平面画布缓存为1/2分辨率的图像。这将成为您未经放大的背景。

最后做你的放大技巧：从平展的画布中抓取相应的像素，并在浮动放大镜中显示它们。

是的，展平图像会有一些开销+时间，但可能会被用户选择和定位放大镜所需的时间所抵消。