Js按钮只工作一次？
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Jeu.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"
style="border-color: 'black'; border-width: 3px; border-style: solid">
</canvas>
<br>
<button type="button"onclick="dessiner()"><img src="Start.jpg"></button>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var contexte = canvas.getContext("2d");
var x
var y
function ghost(){
ghost= new Image();
ghost.src = "ghost.jpg";
ghost.onload = function(){
contexte.drawImage(ghost,x,y,20,20)
}};
x = 32 +(Math.random() * (400-64));
y = 32 +(Math.random() * (400-64));
function dessiner(){
ghost()
};
</script>
</body>
</html>我使用此代码的目的是使图像"ghost.jpg“在每次按下按钮后随机出现在画布上。当我多次按下这个按钮时，问题就出现了。我希望这张照片能开始出现在任何地方，但它只在第一次出现，并且只显示了一次。
回答 4
Stack Overflow用户
发布于 2019-10-12 16:50:55
尽管函数dessiner()和ghost.onload()被多次调用，但是您的变量x和y只被分配了一次随机值，因为它们是在全局范围上定义的。
所以每次你点击的时候都会生成图像，但是.每次都在同一个位置上。
解决这个问题的一种方法是在ghost.onload()中分配X和Y值，或者直接使用32 +(Math.random() * (400-64))作为drawImage()函数的参数。
Stack Overflow用户
发布于 2019-10-12 16:51:49
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="Jeu.css">
</head>
<body>
<canvas id="canvas" width="400" height="400"
style="border-color: 'black'; border-width: 3px; border-style: solid">
</canvas>
<br>
<button type="button"onclick="dessiner()"><img style="width:24px; height:24px;" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/star-icon.png"></button>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var contexte = canvas.getContext("2d");
var x;
var y;
function ghost(){
var image = new Image();
image.src = "https://cdn1.iconfinder.com/data/icons/halloween-1/128/42-512.png";
image.onload = function(){
contexte.drawImage(image,x,y,20,20)
};
};
function dessiner(){
contexte.clearRect(0, 0, canvas.width, canvas.height); //if you don't want to clear the canvar just comment this line ;) and you ll have ghostss all around
x = 32 +(Math.random() * (400-64));
y = 32 +(Math.random() * (400-64));
ghost()
};
</script>
</body>
</html>Stack Overflow用户
发布于 2019-10-12 17:23:42
代码的编写方式有一些问题。
未被let或var替换的变量ghost使ghost成为一个全局变量。这意味着，当您第一次单击dessiner时，将调用ghost函数，但在该函数中，鬼将被重新分配到图像中，然后所有调用图像的进一步尝试都失败。在浏览器控制台中，在第二次单击开始时会显示一个错误：Uncaught TypeError: ghost is not a function，可以通过在声明ghost之前添加'let‘来修复这个错误
function ghost() {
let ghost = new Image();
ghost.src = "ghost.png";
ghost.onload = function(){
contexte.drawImage(image,x,y,20,20)
};
}在此之后，将不会有更多的错误，但您仍然会遇到这样一个事实，即当您单击按钮时，图像的数量不会增加。在现实中，图像正在被生成，但它被准确地放置在最后一幅图像的位置，产生了什么都没有改变的错觉。这是因为每次生成新映像时，x和y值都是相同的。可以通过在onload函数中创建x和y来解决这个问题，并消除x和y的其他声明。
function ghost() {
let ghost = new Image();
ghost.src = "ghost.png";
ghost.onload = function(){
let x = 32 +(Math.random() * (400-64));
let y = 32 +(Math.random() * (400-64));
contexte.drawImage(image,x,y,20,20)
};
}此时，如果您停止，您将有图像出现在随机点后，每次点击，但旧的图像仍将保留。如果你真的想摆脱旧的图像，你所做的就是在绘制新图像之前清除画布。
function dessiner() {
contexte.clearRect(0, 0, canvas.width, canvas.height);
ghost();
} ANd --就这样--你完了！
https://stackoverflow.com/questions/58356260
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号