Fatal编程技术网
  • javascript/
  • Javascript 使用HTML5画布的鼠标坐标问题

Javascript 使用HTML5画布的鼠标坐标问题

javascript html canvas

Javascript 使用HTML5画布的鼠标坐标问题,javascript,html,canvas,Javascript,Html,Canvas,对JavaScript/HTML5画布来说是相当新的。无法使我的背景的特定区域可单击以打开另一页。我想做的是让我的背景的一个选定区域可以点击，而不是整个背景 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>Adventures of Balthazar</title> <

对JavaScript/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>


巴尔塔扎尔历险记
函数init（）{
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
var-mouseX=0；
var-mouseY=0；
var btnPlay=新按钮（250555162284）；
document.addEventListener（'click'，鼠标单击，false）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
}
src='img/menu.png'
功能按钮（xL、xR、yT、yB）{
这个.xLeft=xL；
this.xRight=xR；
这个.yTop=yT；
this.yBottom=yB；
}
Button.prototype.checkClicked=函数（）{

如果（this.xLeft这是代码的工作版本：


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



函数init（）{
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
var img=新图像（）；
var-mouseX=0；
var-mouseY=0；
var btnPlay=新按钮（280、145、20、20）；
document.addEventListener（'click'，鼠标单击，false）；
img.onload=函数（）{
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'
功能按钮（x、y、w、h）{
这个.x=x；
这个。y=y；
这个.w=w；
这个，h=h；
}
Button.prototype.checkClicked=函数（）{
如果（mouseX>this.x&&mouseXthis.y&&mouseY
我不太确定如何完全提供帮助，但我注意到您声明了变量“btnPlay”作为一个新按钮，即使尚未定义构造函数。我刚刚意识到一个小问题。当您单击要单击区域下方的任何内容时，仍会触发函数playGame，例如警报框。已修复。我犯了一个愚蠢的小错误：“this.h