Fatal编程技术网

Javascript Onclick函数

javascript function canvas

Javascript Onclick函数,javascript,function,canvas,onclick,Javascript,Function,Canvas,Onclick,编写一个包含两个按钮的简单脚本。一个按钮可以为“绘制”功能设置动画，其中矩形跟随光标围绕画布。另一个按钮将显示一个沿着画布的矩形，但不会像另一个按钮那样留下轨迹。我有按钮链接，可以执行不同的功能。现在“跟随”按钮不起作用，它确实清除了画布，但仍然允许您进行绘制。在我按下follow按钮后，绘制功能似乎仍在运行。感谢您的帮助 <!doctype html> <html> <head> <meta charset="UTF-8"> <title&

编写一个包含两个按钮的简单脚本。一个按钮可以为“绘制”功能设置动画，其中矩形跟随光标围绕画布。另一个按钮将显示一个沿着画布的矩形，但不会像另一个按钮那样留下轨迹。我有按钮链接，可以执行不同的功能。现在“跟随”按钮不起作用，它确实清除了画布，但仍然允许您进行绘制。在我按下follow按钮后，绘制功能似乎仍在运行。感谢您的帮助

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<input type="button" value="Paint" onclick="isPaint()">
<input type="button" value="Follow" onclick="isFollow()">
<canvas id="myCanvas" width="500" height="500"></canvas>

<script>

function isPaint(){

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

//change draw color
ctx.fillStyle = "#FF0000";


ctx.clearRect(0,0,500,500);

canvas.addEventListener("mousemove", function(event) {
    ctx.fillRect(event.x,event.y,10,10);    
})
}


function isFollow(){

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

//change draw color
ctx.fillStyle = "#FF0000";

ctx.clearRect(0,0,500,500);

    }

</script>
</body>
</html>


帆布
函数isPaint（）{
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
//更改绘图颜色
ctx.fillStyle=“#FF0000”；
ctx.clearRect（0,0500）；
canvas.addEventListener（“mousemove”，函数（事件）{
ctx.fillRect（事件x，事件y，10,10）；
})
}
函数isFollow（）{
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
//更改绘图颜色
ctx.fillStyle=“#FF0000”；
ctx.clearRect（0,0500）；
}
为我工作：

使用
document.getElementById（“paint”）.onclick=function（）{

PS：并考虑删除mousemouse侦听器；）

您的isPaint（）函数正在将“mousemove”的事件侦听器添加到画布中，但它不会在isFollow（）函数中删除。如果您在isFollow（）中删除侦听器这个函数应该可以解决您的问题。

要实现您的目标，您需要进一步增强代码

其主要思想是只绑定一次
mousemove
事件，如果它的行为类似于
follow
，则清除画布

请尝试使用以下代码：

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Canvas</title>
    </head>
    <body>
        <input type="button" value="Paint" onclick="CanvasPainter.paint()" />
        <input type="button" value="Follow" onclick="CanvasPainter.follow()" />
        <canvas id="myCanvas" width="500" height="500"></canvas>

        <script type="text/javascript">

        (function () {

            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');

            //change draw color
            ctx.fillStyle = "#FF0000";


            var CanvasPainter = {
                isPaint: false,

                isFollow: false,

                paint: function () {
                    this.isPaint = true;
                    this.isFollow = false;
                    return;
                },

                follow: function () {
                    this.isPaint = false;
                    this.isFollow = true;
                    return;
                }
            };

            window.CanvasPainter = CanvasPainter;

            canvas.addEventListener("mousemove", function (event) {
                if (CanvasPainter.isPaint || CanvasPainter.isFollow) {

                    if (CanvasPainter.isFollow) {
                        // Clear canvas on every mousemove if it is a follow
                        ctx.clearRect(0, 0, 500, 500);
                    }

                    ctx.fillRect(event.x, event.y, 10, 10);
                }
                return;
            });

            return;
        })();
        </script>
    </body>
</html>


帆布
（功能（）{
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
//更改绘图颜色
ctx.fillStyle=“#FF0000”；
var画布画家={
isPaint:false，
isFollow:错，
油漆：功能（）{
this.isPaint=true；
this.isFollow=false；
返回；
},
下面是：函数（）{
this.isPaint=false；
this.isFollow=true；
返回；
}
};
window.canvaspainer=canvaspainer；
canvas.addEventListener（“mousemove”，函数（事件）{
if（canvaspainer.isPaint | | canvaspainer.isFollow）{
if（canvaspainer.isFollow）{
//如果是跟随，则清除每个鼠标移动上的画布
ctx.clearRect（0,0500500）；
}
ctx.fillRect（事件x，事件y，10，10）；
}
返回；
});
返回；
})();
希望这有帮助！

您清楚地知道如何使用addEventListener，而不是在removeEventlistener上阅读，并删除内联javascript，您会明白的。当我不知道是什么原因导致它时，很难阅读。每个人都从某个地方开始。感谢您的帮助。当我使用follow时，当它当前设置为清理Canvast也感谢你的帮助。现在开始有意义了：）现在查一下这个。谢谢你的帮助非常感谢你的帮助！这种方式更有意义。我想要一个if声明，但不确定如何进行。谢谢again@Arthur它是通过修改OP的代码来实现的，即使只是一点点。@user2980869您是非常欢迎！但是我想知道你为什么不把这个作为答案。：）