HTML5 캔버스를 사용하여 마우스 좌표 관련 문제가 발생했습니다.

JavaScript/HTML5 Canvas의 새로운 기능입니다. 내 배경의 특정 영역을 클릭 할 수있게 만들어 다른 페이지를 열면 문제가 발생합니다. 내가하고 싶은 일은 전체 배경이 아닌 내 배경의 선택된 영역을 클릭 가능하게 만드는 것입니다.HTML5 캔버스를 사용하여 마우스 좌표 관련 문제가 발생했습니다.

<!DOCTYPE HTML>     
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Adventures of Balthazar</title> 

    <link rel="stylesheet" type="text/css" href="menu.css" /> 
    <script type="text/javascript"> 
    function init(){ 
    var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    var mouseX = 0; 
    var mouseY = 0; 
    var btnPlay = new Button(250,555,162,284); 

    document.addEventListener('click',mouseClicked,false); 

    img.onload = function() { 
    ctx.drawImage(img, 0,0); 
    } 

    img.src='img/menu.png' 

    function Button(xL,xR,yT,yB){ 
    this.xLeft = xL; 
    this.xRight = xR; 
    this.yTop = yT; 
    this.yBottom = yB; 
    } 

    Button.prototype.checkClicked = function(){ 
    if(this.xLeft <= mouseX && 
     mouseX <= this.xRight && 
     this.yTop <= mouseY && 
     mouseY <= this.yBottom) 
    return true; 
    } 

    function playGame(){ 
    window.location.href = 'index.html' 
    } 

    function mouseClicked(e){ 
    mousex = e.pageX - canvas.offsetLeft; 
    mousey = e.pageY - canvas.offsetTop; 

    if(btnPlay.checkClicked()) playGame(); 
    } 
    } 
    </script>  
</head> 

<body onLoad="init()"> 
    <div id="canvas-container"> 
    <canvas id="myCanvas" width="800" height="600"> </canvas> 
    </div>  
</body> 
</html>

출처

2014-07-08 user3818418

나는 완전히 도움이 방법을 아주 잘 모르겠어요,하지만 난 당신이 새로운 버튼과 변수 "btnPlay"를 선언 한 것을 알 수 않는 : 여기

는 업데이트 된 코드입니다 정의되었습니다. – SirPython

여기에 코드의 작업 버전입니다 :

http://jsfiddle.net/3PFXa/1/

내가 불통 두 가지가 있었다. (1) var mouseX를 선언했지만 "mousex"; (2) 왼쪽, 오른쪽, 위쪽 및 아래쪽 좌표를 사용하여 클릭 가능 영역을 정의하는 대신 x, y, 너비 및 높이를 사용하십시오. 이것은 캔버스 레이아웃과 더 잘 어울립니다. 이 생성자는 아직했다하더라도,

function init() { 

    var canvas = document.getElementById('myCanvas'); 
    var ctx = canvas.getContext('2d'); 
    var img = new Image(); 
    var mouseX = 0; 
    var mouseY = 0; 
    var btnPlay = new Button(280, 145, 20, 20); 

    document.addEventListener('click', mouseClicked, false); 

    img.onload = function() { 
     ctx.drawImage(img, 0, 0); 

     ctx.fillStyle = "#0f0"; 
     ctx.rect(btnPlay.x, btnPlay.y, btnPlay.w, btnPlay.h); 
     ctx.fill(); 

    } 

    img.src = 'http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg' 

    function Button(x, y, w, h) { 
     this.x = x; 
     this.y = y; 
     this.w = w; 
     this.h = h; 
    } 

    Button.prototype.checkClicked = function() { 

     if (mouseX > this.x && mouseX < this.x + this.w && mouseY > this.y && mouseY < this.y + this.h) 
      return true; 

    } 

    function playGame() { 
     alert("hello!"); 
    } 

    function mouseClicked(e) { 

     mouseX = e.pageX - canvas.offsetLeft; 
     mouseY = e.pageY - canvas.offsetTop; 

     if (btnPlay.checkClicked()) playGame(); 
    } 
}

출처

2014-07-09 00:23:59

방금 깨달은 작은 문제가 하나 있습니다. 클릭하려는 영역 아래의 아무 곳이나 클릭하면 playGame 함수가 여전히 트리거되어 예를 들어 경고 상자가 나타납니다. – user3818418

수정 됨. 나는 "this.h

HTML5 캔버스를 사용하여 마우스 좌표 관련 문제가 발생했습니다.

답변

관련 문제