如何在特定条件下禁用 javascript 功能答案

【问题标题】：how to disable javascript function on a specific condition如何在特定条件下禁用 javascript 功能
【发布时间】：2013-08-10 03:42:06
【问题描述】：

情况是：我有一个画布并在鼠标按下时绘制东西，我有一个生成按钮，可以再次生成新的画布，你可以用同样的方式绘制东西。但问题是当您单击前一个画布时，它开始绘制新画布。它不能绘制函数必须停在那里的新画布。这是绘图功能：

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;

}
};

这里是问题的 jsfiddle http://jsfiddle.net/regeme/eV6kW/3/ 任何帮助都会很棒。

【问题讨论】：

你的问题比你的代码更令人困惑！！！
好的，所以之前的画布回来就不能用了吗？？
如果你看 jsfiddle 就可以理解 .. 生成一个画布并尝试在第一个画布上画一些东西你可以看到它会画第二个画布.. 这就是问题..
当您单击前一个时，您看不到任何绘图，这没关系，但它正在绘制下一个，这很奇怪..您在第一个画布上移动鼠标，但它会在下一个画布上绘制跨度>
原因是它在同一个 id 上执行绘图...在创建画布后，您需要将 id 分配给第二个画布...检测相应画布的鼠标悬停...并切换绘图到各自的画布

标签： javascript html canvas drawing

【解决方案1】：

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

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

【讨论】：