Javascript Js按钮只工作一次？ var canvas=document.getElementById（“canvas”）； var contexte=canvas.getContext（“2d”）；变量x 变量y 函数ghost（）{ ghost=新图像（）； ghost.src=“ghost.jpg”； ghost.onload=函数（）{ 上下文drawImage（ghost，x，y，20,20） }}; x=32+（Math.random（）*（400-64））； y=32+（Math.random（）*（400-64））；函数dessiner（）{ 鬼（） };_Javascript_Html

Javascript Js按钮只工作一次？ var canvas=document.getElementById（“canvas”）； var contexte=canvas.getContext（“2d”）；变量x 变量y 函数ghost（）{ ghost=新图像（）； ghost.src=“ghost.jpg”； ghost.onload=函数（）{ 上下文drawImage（ghost，x，y，20,20） }}; x=32+（Math.random（）*（400-64））； y=32+（Math.random（）*（400-64））；函数dessiner（）{ 鬼（） };

javascript html

Javascript Js按钮只工作一次？ var canvas=document.getElementById（“canvas”）； var contexte=canvas.getContext（“2d”）；变量x 变量y 函数ghost（）{ ghost=新图像（）； ghost.src=“ghost.jpg”； ghost.onload=函数（）{ 上下文drawImage（ghost，x，y，20,20） }}; x=32+（Math.random（）*（400-64））； y=32+（Math.random（）*（400-64））；函数dessiner（）{ 鬼（） };,javascript,html,Javascript,Html,我使用这段代码的目的是使图像“ghost.jpg”在每次按下按钮后随机出现在画布中。当我尝试多次按下按钮时，问题就出现了。我希望图片开始到处出现，但它只在第一次工作时显示图像一次。即使函数dessiner（）和ghost.onload（）被多次调用，变量x和y也只被分配了一次随机值，因为它们是在全局范围内定义的所以每次单击都会生成图像，但是。。。每次都在同一个位置解决此问题的一种方法是在ghost.onload（）中指定X和Y值，或者直接使用32+（Math.random（）*（400-64

我使用这段代码的目的是使图像“ghost.jpg”在每次按下按钮后随机出现在画布中。当我尝试多次按下按钮时，问题就出现了。我希望图片开始到处出现，但它只在第一次工作时显示图像一次。

即使函数

dessiner（）

和

ghost.onload（）

被多次调用，变量

和

也只被分配了一次随机值，因为它们是在全局范围内定义的

所以每次单击都会生成图像，但是。。。每次都在同一个位置

解决此问题的一种方法是在

ghost.onload（）

中指定X和Y值，或者直接使用

32+（Math.random（）*（400-64））

作为

drawImage（）函数的参数。

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



var canvas=document.getElementById（“canvas”）；
var contexte=canvas.getContext（“2d”）；
var x；
变量y；
函数ghost（）{
var image=新图像（）；
image.src=”https://cdn1.iconfinder.com/data/icons/halloween-1/128/42-512.png";
image.onload=函数（）{
上下文drawImage（图像，x，y，20,20）
};
};
函数dessiner（）{
contexte.clearRect（0，0，canvas.width，canvas.height）；//如果您不想清除canvar，只需注释这一行；），您周围就会有幽灵
x=32+（Math.random（）*（400-64））；
y=32+（Math.random（）*（400-64））；
鬼（）
};
代码的编写方式存在一些问题
变量ghost
前面没有let
或var
已使ghost
成为全局变量。这意味着，当您第一次单击dessiner
，ghost
时，会调用该函数，但在该函数中，ghost被重新分配给一个映像，然后所有调用映像的进一步尝试都会失败。浏览器控制台中的此项将在第二次单击后显示错误，表示uncaughttypeerror:ghost不是函数
，只需在声明ghost
之前添加一个“let”即可解决此问题
<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>

在此之后，将不会再有错误，但您仍然会遇到这样一个事实：当您单击按钮时，图像的数量不会增加。在现实中，图像正在生成，但它正被放置在上一个图像的正上方，给人一种没有任何变化的错觉。这是因为每次生成新图像时，x
和y
的值都相同。这可以通过如下方式在onload函数中移动x
和y
的创建，并去掉x
和y
的其他声明来解决
function ghost() {
  let ghost = new Image();
  ghost.src = "ghost.png";
  ghost.onload = function(){
      contexte.drawImage(image,x,y,20,20)
  };
}

此时，如果停止，则每次单击后图像都会随机出现，但旧图像仍会保留。如果你想摆脱旧图像，你所做的就是在绘制新图像之前清除画布
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)
  };
}

就这样，你完了
 这应该对你有好处
首先：在函数ghost（）中有一个变量ghost
因此，当函数第一次运行时，会设置ghost变量，因此函数ghost（）不再作为函数有效，因此将var ghost更改为var ghos
第二：在funtion ghost（）中重新绘制画布之前，需要清除画布并再次获取变量x和y
您在错误的位置初始化x和y的值。将它们放在dessiner（）函数中，然后看到神奇的发生；）
function dessiner() {
  contexte.clearRect(0, 0, canvas.width, canvas.height);
  ghost();
} 

        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();
        }