使用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解析，重繪等觸發一系列操作。如果可以，重用。