Js 按钮只能使用一次？
<html 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”随机出现在画布中。当我尝试多次按下按钮时出现问题。我希望图片会开始出现在任何地方，但它只在第一次有效并显示一次图像。
慕勒34288723回答
-
幕布斯6054654
即使函数dessiner()和ghost.onload()被多次调用，您的变量x和y也只被分配了一次随机值，因为它们是在全局范围内定义的。因此，每次单击时都会生成图像，但是......每次都在相同的位置。解决该问题的一种方法是在您的 中分配 X 和 Y 值ghost.onload()，或者32 +(Math.random() * (400-64))直接将其用作drawImage()函数的参数。 -
慕斯王
代码的编写方式存在一些问题。变量ghost没有被一个preceededlet或var取得了ghost一个全局变量。这意味着您第一次单击 时dessiner，ghost该函数被调用，但在该函数中 ghost 被重新分配给一个图像，然后所有进一步调用图像的尝试都失败了。这在您的浏览器控制台中将在第二次点击后显示错误Uncaught TypeError: ghost is not a function，这可以通过在声明之前简单地添加一个“让”来解决ghostfunction ghost() { let ghost = new Image(); ghost.src = "ghost.png"; ghost.onload = function(){ contexte.drawImage(image,x,y,20,20) };}此后不会再有错误，但您仍然会遇到单击按钮时图像数量不会增加的事实。实际上，图像正在生成，但它被放置在最后一张图像的正上方，给人一种什么都没有改变的错觉。这是因为每次生成新图像时，您的x和y值都是相同的。这可以通过移动你的创作是固定的x，并y在这样的的onload功能，摆脱其他声明的x，并yfunction 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();} 就这样你就完成了！ -
慕的地10843
这应该对你有用。首先：你在函数 ghost() 中有一个变量 ghost，所以当函数第一次运行时，ghost 变量被设置，因此函数 ghost() 不再作为函数有效，所以将 var ghost 更改为 var ghos 其次：你需要清除在函数 ghost() 中重绘画布之前，再次获取变量 x 和 y var canvas = document.getElementById("canvas"); var contexte = canvas.getContext("2d"); function ghost(){ var x = 32 +(Math.random() * (400-64)); var y = 32 +(Math.random() * (400-64)); ghos= new Image(); ghos.src = "icon.png"; ghos.onload = function(){ // Store the current transformation matrix of canvas contexte.save(); // Use the identity matrix while clearing the canvas contexte.setTransform(1, 0, 0, 1, 0, 0); contexte.clearRect(0, 0, canvas.width, canvas.height); // Restore the transform contexte.restore(); contexte.drawImage(ghos,x,y,20,20) canvas.rem }}; function dessiner(){ ghost(); }
随时随地看视频慕课网APP
相关分类
JavaScript