html5 – 在Firefox中绘制画布缓慢

2019年7月21日 235次阅读

我正在制作一个你可以在我的小提琴中看到的插件,问题是当我们在Firefox中绘制时它会慢下来但在Google Chrome中很好.任何帮助？

BTW使用两个画布,一个用于绘制区域以便稍后将其保存为图像.检查小提琴

context.beginPath();
newcontext.beginPath();
// If dragging then draw a line between the two points
if (clickDrag[i] && i) {
    context.moveTo(clickX[i - 1], clickY[i - 1]);
    newcontext.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
    // The x position is moved over one pixel so a circle even if not dragging
    context.moveTo(clickX[i] - 1, clickY[i]);
    newcontext.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
newcontext.lineTo(clickX[i], clickY[i]);
// Set the drawing color
if (clickTool[i] === "eraser") {
    //context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white
    context.strokeStyle = 'white';
    newcontext.strokeStyle = 'white';
} else {
    //context.globalCompositeOperation = "source-over"; // To erase instead of draw over with white
    context.strokeStyle = clickColor[i];
    newcontext.strokeStyle = clickColor[i];
}

context.lineCap = "round";
context.lineJoin = "round";
context.lineWidth = radius;
context.stroke();

http://jsfiddle.net/aV6bg/

最佳答案 我认为你正在进行大量的计算和绘图,以便能够以更简单的方式获得.

换句话说,Firefox不是那么慢……只是Chrome的速度非常快:-D

另一种方法是,例如,浏览器在画布顶部显示部分透明图像,然后直接在画布上执行绘图操作,无需特殊遮罩.

这可以允许通过面具看到绘画而不必进行复杂的剪裁操作.

只有当用户要求将图片导出为png时,如果这是您需要提供的内容,那么这些操作才能在单个画布上完成.

在行动check this out中查看此方法的示例

source code是lisp,但它不应该太难阅读(完整的程序只有116行)

点赞