Javascript Onclick 函数
[英]Javascript Onclick Functions
问题描述
Writing a simple script to have two buttons.
编写一个简单的脚本来拥有两个按钮。 One button animates a "painting" feature where rectangles follow the cursor around the canvas.一个按钮为“绘画”功能设置动画，其中矩形跟随画布周围的光标。 The other button would display a rectangle that follows the canvas but doesn't leave a trail like the other.另一个按钮将显示一个跟随画布的矩形，但不会像另一个按钮那样留下痕迹。 I have the buttons linked to do different functions.我将按钮链接起来以执行不同的功能。 Right now the follow button doesn't work, it does clear the canvas but it still allows you to paint.现在跟随按钮不起作用，它确实清除了画布，但它仍然允许您绘画。 It seems that the paint function is still running after I hit the follow button.点击关注按钮后，绘画功能似乎仍在运行。 Any help is appreciated.任何帮助表示赞赏。
<!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>
3 个解决方案
解决方案1
1 已采纳 2014-04-10 15:36:29
Work for me : http://jsfiddle.net/XF7m4/1/为我工作： http : //jsfiddle.net/XF7m4/1/
Using document.getElementById("paint").onclick= function (){使用document.getElementById("paint").onclick= function (){
PS :And think to remove the mousemouse listener ;) PS：并考虑删除鼠标鼠标侦听器；）
解决方案2
1 2014-04-10 15:41:45
To achieve what you are trying to do you will need to enhance your code a little more.为了实现您正在尝试做的事情，您需要更多地增强您的代码。
The main idea is to bind the mousemove event only once and clear the canvas if it is to behave like a follow .主要思想是只绑定一次mousemove事件并清除画布，如果它表现得像一个follow 。
Try using the following code:尝试使用以下代码：
<!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>
Hope this helps!希望这可以帮助！
解决方案3
0 2014-04-10 15:36:48
Your isPaint() function is adding an event listener for "mousemove" to the canvas, but it isn't getting removed in the isFollow() function.您的 isPaint() 函数正在将“mousemove”的事件侦听器添加到画布，但它并未在 isFollow() 函数中被删除。 If you remove your listener in the isFollow() function this should fix your problem.如果您在 isFollow() 函数中删除您的侦听器，这应该可以解决您的问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.