gpt4 book ai didi

Javascript Onclick 函数

转载 作者:行者123 更新时间:2023-11-29 22:02:18 25 4
gpt4 key购买 nike

编写一个简单的脚本来拥有两个按钮。一个按钮动画“绘画”功能,其中矩形跟随光标围绕 Canvas 。另一个按钮将显示一个跟随 Canvas 的矩形,但不会像另一个那样留下痕迹。我有链接的按钮来执行不同的功能。现在跟随按钮不起作用,它确实清除了 Canvas ,但它仍然允许您绘画。在我点击关注按钮后,绘画功能似乎仍在运行。任何帮助表示赞赏。

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

最佳答案

为我工作:http://jsfiddle.net/XF7m4/1/

使用 document.getElementById("paint").onclick= function (){

PS : 并考虑删除 mousemouse 监听器 ;)

关于Javascript Onclick 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22992413/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com