首頁猿問 Js 按鈕只能使用一次？

Js 按鈕只能使用一次？

JavaScript

慕勒3428872 2021-11-18 16:56:46

<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()函數的參數。

反對回復 2021-11-18

慕斯王

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

}

就這樣你就完成了！

反對回復 2021-11-18

慕的地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();

}

反對回復 2021-11-18

3 回答
0 關注
515 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Js 按鈕只能使用一次？

Js 按鈕只能使用一次？

3 回答

添加回答

Js 按鈕只能使用一次？

Js 按鈕只能使用一次？