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

Question

）

我有一个小型的Web应用程序，它使用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() 。

同样有一点细节：

例如，如果我们想要将所有内容向左移动10个像素，我们可以使用drawImage()将内容移动到其中一个边：

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

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

最后用新图形绘制右边的10px间隙（你可能想要缓存宽度和高度，但坦率地说，在现代JavaScript引擎中，这与过去一样无关紧要）。 测试你的点以查看实际需要绘制的点以避免再次绘制所有点，否则会使这一步毫无意义。

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