0

The situation is: I have a canvas and draw things on mousedown, and I have a generate button that generates new canvas' again you can draw things in same way. BUT the problem is when you click the previous canvas it started to draw the new one. It must not draw the new canvas the function has to stop there. Here is the drawing function:

canvas.onmousedown = function(e) {
if (!painting) {
    painting = true;
} else {
    painting = false;
}

lastX = e.pageX - this.offsetLeft;
lastY = e.pageY - this.offsetTop;
};

canvas.onmousemove = function(e) {
if (painting) {
    mouseX = e.pageX - this.offsetLeft;
    mouseY = e.pageY - this.offsetTop;

    // find all points between        
    var x1 = mouseX,
        x2 = lastX,
        y1 = mouseY,
        y2 = lastY;


    var steep = (Math.abs(y2 - y1) > Math.abs(x2 - x1));
    if (steep){
        var x = x1;
        x1 = y1;
        y1 = x;

        var y = y2;
        y2 = x2;
        x2 = y;
    }
    if (x1 > x2) {
        var x = x1;
        x1 = x2;
        x2 = x;

        var y = y1;
        y1 = y2;
        y2 = y;
    }

    var dx = x2 - x1,
        dy = Math.abs(y2 - y1),
        error = 0,
        de = dy / dx,
        yStep = -1,
        y = y1;

    if (y1 < y2) {
        yStep = 1;
    }

    for (var x = x1; x < x2; x++) {
        if (steep) {
            ctx.fillRect(y, x, 1, 1);
        } else {
            ctx.fillRect(x, y, 1, 1);
        }

        error += de;
        if (error >= 0.5) {
            y += yStep;
            error -= 1.0;
        }
    }



    lastX = mouseX;
    lastY = mouseY;

}
};

Here is jsfiddle for the issue http://jsfiddle.net/regeme/eV6kW/3/ any help would be great.

4

1 回答 1

0

我onmouseup在代码中添加了一个，使其仅在按住鼠标时才绘制，问题是由于手动创建的第一个画布及其回调造成的。 使用这种方式 clear 将清除当前正在处理的画布。

查看代码以获得更多见解：http: //jsfiddle.net/cryostat/grb8e/1/

于 2013-08-09T10:09:53.083 回答