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

Question

Fairly new to JavaScript/HTML5 Canvas. JavaScript / HTML5 Canvas的新手。 Having trouble making a specific area of my background clickable so that it opens up another page. 无法点击背景的特定区域，以便打开另一个页面。 What I want to do is make a selected area of my background clickable, rather then the entire background. 我想做的是使背景的选定区域可单击，而不是整个背景。

<!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>

Answer 1

Here's a working version of your code: 这是您的代码的有效版本：

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

There were two things that I tweaked. 我调整了两件事。 (1) you declared var mouseX but you set a "mousex"; （1）您声明了var mouseX，但设置了“ mousex”； (2) use x, y, width and height instead of using left, right, top and bottom coordinates to define your clickable area. （2）使用x，y，宽度和高度，而不是使用左，右，上和下坐标来定义您的可点击区域。 This fits nicer with the canvas layout. 这更适合画布布局。

Here's the updated code: 这是更新的代码：

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

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2014-07-09 00:23:59

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2014-07-09 00:23:59

解决方案1
0 已采纳 2014-07-09 00:23:59