重新渲染时停止画布闪烁

Question

我编写了一个jQuery插件，可以将四个多边形渲染到canvas上并用图像填充它们。

当您将鼠标悬停在polygon上时，它会移动到单独的顶层并重新渲染，以便在鼠标移开时展开然后收缩。

有没有办法做到这一点，以免它闪烁？

我看了this question，但不太明白接受的答案是做什么的（我知道它会将图像绘制在一个单独的图层上，但我不知道它是如何检查它是否有在使用之前完成渲染）或如何将其包含在my jsfiddle code

中

Answer 1

事实证明这是因为我每次制作图纸时都会制作一个新的图像对象：

            var imageObj = new Image();
            imageObj.src = polyArray[4];
            imageObj.onload = function () {
                poly.setFillPatternImage(imageObj);
                stage.draw();
            }

我对此进行了更改，以便创建这些对象并将其缓存到数组中然后重新使用。这使得重新渲染能够更快地运行并消除了闪烁：

http://jsfiddle.net/peteng/KAkvX/10/