javascript - 不能在我的 Canvas 上画任何东西

我编写的相同代码使画布绘图板的行为有所不同。不知道是什么遮挡了。在此之前，我已经编写了相同的代码，但效果很好，但是这次不允许我绘制任何东西。？

<html>
<body>
<script>
var candraw=false;
var x,y;
var i=0;
var radius=10;

function canvloder(){
    var canvas=document.getElementById("mycanv");
    canvas.width=500;
    canvas.height=700;
    canvas.style.border="1px solid black";
    canvas.style.position="absolute";
    canvas.style.left="270px";
    canvas.style.top="30px";
    canvas.style.backgroundColor="yellow";
    canvas.addEventListener("click",function(e){candraw(e)},false);
    canvas.addEventListener("mousemove",function(e){nowdraw(e)},false);
    canvas.addEventListener("mouseout",function(e){cannotdraw(e)},false);
    canvas.addEventListener("mouseup",function(e){cannotdraw(e)},false);
}

function candraw(e){
    candraw=true;
}

function nowdraw(e){
    var ctx=document.getElementById("mycanv").getContext("2d");
    x=e.offsetX||e.layerX||0;
    y=e.offsetY||e.layerY||0;

    if(candraw){
        if(i==0){
            ctx.strokeStyle="red";
            ctx.lineTo(x,y);
            ctx.stroke();
        }

        if(i>0){
            ctx.fillStyle="red";
            ctx.beginPath();
            ctx.arc(x,y,radius,0,2*Math.PI);
            ctx.fill();

           i=0;
        }

        ctx.fillStyle="red";
        ctx.beginPath();
        ctx.arc(x,y,radius,0,2*Math.PI);
        ctx.fill();
        ctx.beginPath();
        ctx.lineWidth=2*radius;
        ctx.strokeStyle="red";

        ctx.moveTo(x,y);

    }

}

function cannotdraw(){
    candraw=false;
    i++;
}

window.onload=canvloder;
</script>
<canvas id="mycanv" ></canvas>


</body>
</html>

最佳答案

var candraw=false;

function candraw(e){
    candraw=true;
}

那么... candraw是什么？是函数还是布尔值？用candraw中的false覆盖cannotdraw后，candraw不再起作用。

无论如何，这两个功能是完全没有用的，甚至根本不应该作为两个独立的功能存在。您可能想要执行以下操作：

function setDrawable(bool){
    candraw = bool;
}