Question

我正在制作一个你可以在我的小提琴中看到的插件，问题是当我们在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/

Answer 1

我认为你正在做很多计算和绘画，可以用更简单的方式获得。

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

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

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

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

要查看此方法的示例check this out

source code在lisp中，但它不应该太难读（整个程序只有116行）

Answer 2

最后摆脱了我的第二个用于保存图像的画布，在代码下方使用了得到绘图区域矩形，因此不再为第二个画布添加任何颜色。

现在在Firefox 22（ubuntu）中速度比之前更好。

function savePhoto() {
var canvas = document.getElementById("canvas");
var tempcanvas = document.createElement("canvas");
var tempctx = tempcanvas.getContext("2d");
tempcanvas.width = 820;
tempcanvas.height = 675;
tempctx.drawImage(canvas, 90, 131,790, 680,0, 0,  820, 680);
var dataUrl = tempcanvas.toDataURL();
alert(dataUrl);
}

//Ajax Request to save image to folder For drawings page
var request = $.ajax({
url: "<?php echo get_bloginfo('url').'/canvas?wcpdx=ajax-handler'; ?>",
type: "POST",
data: { 'rawimage': dataUrl }
});
request.done(function(msg) {
alert( 'success = '+msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});

效果很好：）

画布在Firefox中绘制速度慢

2 个答案: