javascript - 提高 html canvas mousemove 图像蒙版的性能

Question

我有一个正在绘制图像和剪裁以创建显示图像的效果的 Canvas 。我的代码工作正常 我尝试使用 debouce 方法和 rAF 来提高 Canvas 渲染性能，但我只看到了很小的 yield (如果有的话)。

我怀疑我遍历 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。
• 你在每一步都重新绘制一切。

所以我建议一种更有效的解决方案:
• 叠放两张 Canvas ，下面一张是您的图像，上面一张是 mask 。
• 高效应对鼠标。
• 鼠标移动时仅清除部分蒙版 Canvas :每次移动仅在蒙版 Canvas 上绘制一个圆圈。
(为此我使用了 globalCompositeOperation = 'destination-out' )

在 Firefox、Chrome 或 Safari 上，结果非常流畅。

(在 mac 操作系统上测试)。

fiddle :(必须点击清除)

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);