使用HTML5画布处理鼠标坐标问题
使用HTML5画布处理鼠标坐标问题
提问于 2014-07-08 23:49:36
JavaScript/HTML5 5画布非常新。有困难，使我的背景的一个特定领域可点击，以便它打开另一页。我想要做的是使选定的区域，我的背景点击，而不是整个背景。
<!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>回答 1
Stack Overflow用户
回答已采纳
发布于 2014-07-09 00:23:59
下面是代码的工作版本：
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();
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24643308
复制相关文章
相似问题
腾讯云开发者
