html - 重新渲染时停止画布闪烁

Question

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

当您将鼠标悬停在 apolygon上时，它会移动到单独的顶层并重新渲染，因此如果您将鼠标移出，它会展开然后收缩。

有什么办法可以让它不闪烁吗？

我看过这个问题，但不太明白接受的答案在做什么（我知道它在单独的图层上绘制图像，但我不知道它如何在使用之前检查它是否已经完成渲染）或者如何将它包含在我的 jsfiddle 代码中

Answer 1

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

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

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

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