나는이 모든 것에 완전히 익숙하지 않으므로 도움을 주시면 감사하겠습니다.
캔버스를 사용하여 버튼을 그리고 여기에 상호 작용을 추가하는 과제가 있습니다. 버튼을 그렸지만 클릭해도 아무 일도 일어나지 않습니다. '이름이 무엇입니까?'라는 메시지가 표시되기를 원합니다.
감사
편집 : 첫 번째 질문에 대한 답이 있습니다. 대단히 감사합니다. 이제 버튼의 텍스트가 다소 나빠 보입니다. 무엇이 잘못되었는지 알고 계십니까? 그림
//Setup canvas
const canvas = document.getElementById("graphics");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
const context = canvas.getContext("2d");
//Mouse variables
let mouseX;
let mouseY;
let isMouseDown;
//Handle mouse events
function handleMouseMove(event) {
mouseX = event.pageX;
mouseY = event.pageY;
}
function handleMouseDown(event) {
isMouseDown = true;
}
function handleMouseUp(event) {
isMouseDown = false;
}
//Handle animation
function draw() {
// Draws the button (rectangle)
context.beginPath()
context.strokeStyle = "black";
context.strokeRect(125, 125, 150, 75);
context.fill();
context.closePath
// Draws text inside button
context.beginPath ();
context.font = '15px Georiga';
context.fillText ('Click this button!', 145, 168);
context.closePath ();
if (mouseDown && mouseX >= 125 && mouseX <= 275 && mouseY >= 125 && mouseY <= 200) {
prompt('WHat is your name?');
}
window.requestAnimationFrame(draw);
}
//Set listeners
document.addEventListener("mousedown", handleMouseDown, false);
document.addEventListener("mouseup", handleMouseUp, false);
document.addEventListener("mousemove", handleMouseMove, false);
//Start animation
window.requestAnimationFrame(draw);<!-- add canvas element -->
<canvas id="graphics">
Canvas not working!
</canvas>이미 거의 얻었습니다! 코드의이 부분에서 :
if (mouseDown && mouseX >= 125 && mouseX <= 275 && mouseY >= 125 && mouseY <= 200) {
prompt('WHat is your name?');
}
mouseDown 이 true 인지 확인 하고 있지만 mouseDown 이라는 변수가 없습니다 . 당신은 그것을 isMouseDown 이라고 불렀습니다 .
따라서 코드를 다음과 같이 변경해야합니다.
if (isMouseDown && mouseX >= 125 && mouseX <= 275 && mouseY >= 125 && mouseY <= 200) {
prompt('WHat is your name?');
}
다음은 전체 코드입니다.
//Setup canvas
const canvas = document.getElementById("graphics");
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
const context = canvas.getContext("2d");
//Mouse variables
let mouseX;
let mouseY;
let isMouseDown;
//Handle mouse events
function handleMouseMove(event) {
mouseX = event.pageX;
mouseY = event.pageY;
}
function handleMouseDown(event) {
isMouseDown = true;
}
function handleMouseUp(event) {
isMouseDown = false;
}
//Handle animation
function draw() {
// Draws the button (rectangle)
context.beginPath();
context.strokeStyle = "black";
context.strokeRect(125, 125, 150, 75);
context.fill();
context.closePath;
// Draws text inside button
context.beginPath();
context.font = "15px Georiga";
context.fillText("Click this button!", 145, 168);
context.closePath();
if (isMouseDown && mouseX >= 125 && mouseX <= 275 && mouseY >= 125 && mouseY <= 200) {
prompt("WHat is your name?");
}
window.requestAnimationFrame(draw);
}
//Set listeners
document.addEventListener("mousedown", handleMouseDown, false);
document.addEventListener("mouseup", handleMouseUp, false);
document.addEventListener("mousemove", handleMouseMove, false);
//Start animation
window.requestAnimationFrame(draw);
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다