提高html canvas mousemove图像蒙版的性能 [英] increase performance on html canvas mousemove image mask
问题描述
我有一个画布正在绘制图像并进行裁剪，以创建图像被显示的效果。我尝试使用debouce方法以及rAF来提高画布的渲染性能，使代码正常工作，但是我只看到了很小的收获（如果有的话）。
I have a canvas that is drawing an image and clipping to create the effect that the image is being revealed. I have the code working properly I have tried using a debouce method and also rAF to increase the canvas rendering performance but I only saw small gains if any.
我怀疑我要遍历x和y坐标数组的方式可能是问题。
当将阵列放入控制台中时，与将圆在屏幕上显示的速率相同时，似乎有点滞后。
I suspect the way I am iterating through my array of x and y coordinates could be the issue. It seems to lag quite a bit when it is out putting the array in console about the same rate as the circle appear on the screen.
这是重绘功能：
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)
})
}
我想我我正在寻找一些建议来加快我的代码的速度，以便绘制圆圈看起来更像是绘图。
I guess what I am looking for is some advice to speed up my code so the rendering of the circles seems more like drawing.
这是工作示例-> http：// jsfiddle.net/naeluh/4h7GR/
推荐答案
这里有几个问题：
•您的鼠标代码是一场噩梦，每一步都需要遍历DOM。
•您将重绘每一步的所有内容。
There are several issues here :
• Your mouse code is a nightmare, traversing the DOM on every move.
• You are redrawing everything on each move.
所以我建议一种更有效的解决方案：
•堆叠两张画布，下面一张是您的图像，上面一张是遮罩。 。
•有效处理鼠标。
•鼠标移动时仅清除蒙版画布的一部分：每次移动仅在蒙版画布上绘制一个圆圈。
（为此我使用了globalCompositeOperation ='destination-out'）
So i suggest a way more efficient solution :
• stack two canvases, the one below is your image, the one on top is the mask.
• Deal efficiently with the mouse.
• Only clear part of the mask canvas on mouse move : just one circle drawn on the mask canvas for each move.
(for that i used a globalCompositeOperation = 'destination-out' )
在Firefox，Chrome或Windows XP上，结果完全平滑苹果浏览器 。
Result is perfectly smooth either on Firefox, Chrome, or Safari .
（在Mac OS上测试）。
(tested on mac OS).
小提琴：
（您必须单击以清除）
the fiddle : (you have to click to clear)
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);
这篇关于提高html canvas mousemove图像蒙版的性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
