Question

我编写的相同代码使画布绘图板的行为有所不同。不知道发生了什么。我在编写相同代码之前工作正常但是这次不允许我画一件事。可能会出错？

<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>

Answer 1

var candraw=false;

function candraw(e){
    candraw=true;
}

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

无论如何，这两个函数都是无用的，甚至不应该作为两个单独的函数存在。你可能想做这样的事情：

function setDrawable(bool){
    candraw = bool;
}

不能在我的画布上画任何东西

1 个答案: