使用 jcanvas 绘制图层：性能优化

Question

)

我有一个小型网络应用程序，它使用 jquery 和 jcanvas (http://calebevans.me/projects/jcanvas/) 在画布上打印一些形状。

它基本上是一张地图。用户可以放大并拖动它，无论何时他都必须重新绘制所有内容。

正如您在下面的代码中看到的那样，我经常删除和重新创建图层（每当用户拖动地图、缩放或调整其窗口大小时）。我需要图层来处理悬停和点击事件。我的问题是，与其他解决方案相比，这种处理事件的方式是否会对性能产生很大影响。如果是这种情况，我该如何优化我的性能？

var posX = 0, posY = 0;
var zoom = 100;
var points = []; //array of up to 1000 points retrieved by ajax

function draw(){
    $("canvas").removeLayers();
    $("canvas").clearCanvas();


    var xp, yp, ra;
    var name;

    $.each(points, function(index) {
        xp = (this["x"]-posX)/zoom;
        yp = (this["y"]-posY)/zoom;
        ra = 1000/zoom;
        $("#map").drawArc({
            layer:true,
            fillStyle: "black",
            x: xp, 
            y: yp,
            radius: ra,
            mouseover: function(layer) {
                $(this).animateLayer(layer, {
                      fillStyle: "#c33",
                      scale: 1.0
                    },200);
            },
            mouseout: function(layer) {
                $(this).animateLayer(layer, {
                      fillStyle: "black",
                      scale: 1.0
                    },200);
            },
            mouseup: function(layer){
                context(index,layer.x,layer.y);
            }
        });
    }); 

}

感谢您的宝贵时间:-)

Answer 1

优化通常是一个个案，但我会尝试针对这种情况给出一些一般性的观点：

• 尽量减少操作
• 创建和删除“层”（画布元素）是昂贵的操作 - 尽量避免。
• 如果需要清除整个画布，请使用 drawImage() 移动内容，或者使用 clearRect()。

同样的，还有更多细节：

例如，您可以使用 drawImage() 将内容移动到一侧，如果我们想将所有内容向左移动 10 个像素，我们可以这样做：

context.drawImage(canvas, 10, 0, canvas.width - 10, canvas.height,
                          0, 0, canvas.width - 10, canvas.height);

这将只剪切我们想要移动/滚动的部分，然后在新位置重新绘制它。

最后用新的图形在右边的 10px 间隙中绘制（您可能想要缓存宽度和高度，但坦率地说，在现代 JavaScript 引擎中，这不再像过去那样重要了）。测试您的点以查看实际需要绘制哪些点以避免再次绘制所有点，否则会导致此步骤毫无意义。

如果您想清除画布，而不是删除画布元素并创建新画布，请使用方法clearRect() 或使用fillRect()，如果您想要图案、颜色等。删除和创建元素是一项昂贵的操作从优化的角度来看，特别是如果它们影响浏览器的流程（如果需要重排内容）。它会触发布局、css 解析、重绘等一系列操作。如果可以，请重用。