<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 yfunction 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”随机出现在画布中。当我尝试多次按下按钮时出现问题。我希望图片会开始出现在任何地方，但它只在第一次有效并显示一次图像。
3 回答
幕布斯6054654
TA贡献1876条经验 获得超7个赞
即使函数dessiner()和ghost.onload()被多次调用，您的变量x和y也只被分配了一次随机值，因为它们是在全局范围内定义的。
因此，每次单击时都会生成图像，但是......每次都在相同的位置。
解决该问题的一种方法是在您的 中分配 X 和 Y 值ghost.onload()，或者32 +(Math.random() * (400-64))直接将其用作drawImage()函数的参数。
慕斯王
TA贡献1864条经验 获得超2个赞
代码的编写方式存在一些问题。
变量ghost没有被一个preceededlet或var取得了ghost一个全局变量。这意味着您第一次单击 时dessiner，ghost该函数被调用，但在该函数中 ghost 被重新分配给一个图像，然后所有进一步调用图像的尝试都失败了。这在您的浏览器控制台中将在第二次点击后显示错误Uncaught TypeError: ghost is not a function，这可以通过在声明之前简单地添加一个“让”来解决ghost
function 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，并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();
}
就这样你就完成了！
慕的地10843
TA贡献1785条经验 获得超8个赞
这应该对你有用。
首先：你在函数 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();
}
添加回答
举报
0/150
提交
取消