首頁(yè) 猿問(wèn) 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>我使用此代碼的目標(biāo)是在每次按下按鈕后使圖像“ghost.jpg”隨機(jī)出現(xiàn)在畫(huà)布中。當(dāng)我嘗試多次按下按鈕時(shí)出現(xiàn)問(wèn)題。我希望圖片會(huì)開(kāi)始出現(xiàn)在任何地方，但它只在第一次有效并顯示一次圖像。

查看完整描述

3 回答

幕布斯6054654

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超7個(gè)贊

即使函數(shù)dessiner()和ghost.onload()被多次調(diào)用，您的變量x和y也只被分配了一次隨機(jī)值，因?yàn)樗鼈兪窃谌址秶鷥?nèi)定義的。

因此，每次單擊時(shí)都會(huì)生成圖像，但是......每次都在相同的位置。

解決該問(wèn)題的一種方法是在您的中分配 X 和 Y 值ghost.onload()，或者32 +(Math.random() * (400-64))直接將其用作drawImage()函數(shù)的參數(shù)。

反對(duì) 回復(fù) 2021-11-18

慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

代碼的編寫(xiě)方式存在一些問(wèn)題。

變量ghost沒(méi)有被一個(gè)preceededlet或var取得了ghost一個(gè)全局變量。這意味著您第一次單擊時(shí)dessiner，ghost該函數(shù)被調(diào)用，但在該函數(shù)中 ghost 被重新分配給一個(gè)圖像，然后所有進(jìn)一步調(diào)用圖像的嘗試都失敗了。這在您的瀏覽器控制臺(tái)中將在第二次點(diǎn)擊后顯示錯(cuò)誤Uncaught TypeError: ghost is not a function，這可以通過(guò)在聲明之前簡(jiǎn)單地添加一個(gè)“讓”來(lái)解決ghost

function ghost() {

let ghost = new Image();

ghost.src = "ghost.png";

ghost.onload = function(){

contexte.drawImage(image,x,y,20,20)

};

}

此后不會(huì)再有錯(cuò)誤，但您仍然會(huì)遇到單擊按鈕時(shí)圖像數(shù)量不會(huì)增加的事實(shí)。實(shí)際上，圖像正在生成，但它被放置在最后一張圖像的正上方，給人一種什么都沒(méi)有改變的錯(cuò)覺(jué)。這是因?yàn)槊看紊尚聢D像時(shí)，您的x和y值都是相同的。這可以通過(guò)移動(dòng)你的創(chuàng)作是固定的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)

};

}

此時(shí)，如果您停下來(lái)，每次單擊后，圖像都會(huì)出現(xiàn)在隨機(jī)位置，但舊圖像仍將保留。如果您確實(shí)想擺脫舊圖像，您所做的就是在繪制新圖像之前清除畫(huà)布。

function dessiner() {

contexte.clearRect(0, 0, canvas.width, canvas.height);

ghost();

}

就這樣你就完成了！

反對(duì) 回復(fù) 2021-11-18

慕的地10843

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超8個(gè)贊

這應(yīng)該對(duì)你有用。

首先：你在函數(shù) ghost() 中有一個(gè)變量 ghost，所以當(dāng)函數(shù)第一次運(yùn)行時(shí)，ghost 變量被設(shè)置，因此函數(shù) ghost() 不再作為函數(shù)有效，所以將 var ghost 更改為 var ghos 其次：你需要清除在函數(shù) ghost() 中重繪畫(huà)布之前，再次獲取變量 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();

}

反對(duì) 回復(fù) 2021-11-18

3 回答
0 關(guān)注
502 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書(shū)簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

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

Js 按鈕只能使用一次？

3 回答

添加回答

Js 按鈕只能使用一次？