提高html canvas mousemove圖像蒙版的性能

Question

我有一個畫布正在繪制圖像並進行裁剪以創建圖像被顯示的效果。 我嘗試使用debouce方法和rAF來提高畫布的渲染性能，使代碼正常工作，但是我發現只有很小的收獲（如果有的話）。

我懷疑我遍歷x和y坐標數組的方式可能是問題。 當將陣列放入控制台中時，與將圓形顯示在屏幕上的速率相同時，似乎滯后了一段時間。

這是重繪功能：

  function redraw(mouse) {
     m.push(mouse);
     m.forEach(function (a) {
        ctx.drawImage(img, 0, 0);
        ctx.beginPath();
        ctx.rect(0, 0, 500, 500);
        ctx.arc(a.x, a.y, 70, 0, Math.PI * 2, true);
        ctx.clip();
        ctx.fillRect(0, 0, 500, 500)
      })
    }

我想我正在尋找的是一些建議來加快我的代碼的速度，因此繪制圓圈看起來更像是繪圖。

這是工作示例-> http://jsfiddle.net/naeluh/4h7GR/

Answer 1

這里有幾個問題：
•您的鼠標代碼是一場噩夢，每走一步都會遍歷DOM。
•您正在重畫每一步的所有內容。

所以我建議一種更有效的解決方案：
•堆疊兩塊畫布，下面的一塊是您的圖像，上面的一塊是遮罩。
•有效處理鼠標。
•鼠標移動時僅清除蒙版畫布的一部分：每次移動僅在蒙版畫布上繪制一個圓圈。
（為此，我使用了globalCompositeOperation ='destination-out'）

在Firefox，Chrome或Safari上，結果都非常流暢 。

（在Mac OS上測試）。

小提琴：（您必須單擊以清除）

http://jsfiddle.net/gamealchemist/4h7GR/22/

html

<canvas   style='position: absolute; top: 0;left: 0;' id="canvas1" width="500" height="500"></canvas>
<canvas style='position: absolute;top: 0;left: 0;' id="canvas2" width="500" height="500"></canvas>

js

var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
var can2 = document.getElementById("canvas2");
var ctx2 = can2.getContext("2d");

var img = new Image();
img.onload = function () { ctx.drawImage(img,0,0); };
img.src = "http://placekitten.com/500/500";

ctx2.fillStyle='#000';
ctx2.fillRect(0,0,500,500);
ctx2.globalCompositeOperation = 'destination-out';

function clearThis(x,y) {
    console.log('toto');
    ctx2.fillStyle='#F00000';
    ctx2.beginPath();
    ctx2.arc(x, y, 70, 0, Math.PI * 2, true);
    ctx2.fill();
}

var mouse = {
    x: 0,
    y: 0,
    down: false
};

function setupMouse(canvas, onMouseMove, preventDefault) {
    var rectLeft, rectTop;
    var hook = canvas.addEventListener.bind(canvas);
    var mouseDown = updateMouseStatus.bind(null, true);
    var mouseUp = updateMouseStatus.bind(null, false);
    hook('mousedown', mouseDown);
    hook('mouseup', mouseUp);
    hook('mousemove', updateCoordinates);
    hook('scroll', updateRect);
    // var mouseOut = function() { mouse.down=false ; } ;
    // hook('mouseout', mouseOut); 
    function updateMouseStatus(b, e) {
        mouse.down = b;
        updateCoordinates(e);
        if (preventDefault) {
            e.stopPropagation();
            e.preventDefault();
        }
    }

    function updateCoordinates(e) {
        mouse.x = (e.clientX - rectLeft);
        mouse.y = (e.clientY - rectTop);
        onMouseMove(mouse.x, mouse.y);
    }

    function updateRect() {
        var rect = canvas.getBoundingClientRect();
        rectLeft = rect.left;
        rectTop = rect.top;
    }
    updateRect();
};    
setupMouse(can2, clearThis, true);

Answer 2

上面的代碼會很好..但是需要一些編輯，我已經在Fiddle中編輯了代碼..我相信在性能方面有一些改進

1. 所以我多看了一點，發現了一個預期的錯誤。 主要問題是繪制路徑的積累。

為什么每次都要添加clip和fillRect ..最后做...主要問題解決了，就像

can.addEventListener("mousemove", function (e) {
var mouse = getMouse(e, can);
requestAnimationFrame(function () {
    redraw(mouse);
            ctx.clip();
    ctx.fillRect(0, 0, 500, 500);
    console.log(mouse);
});
}, false);

---

• 2.更新的JSFiidle是

UpdatedFiddle