我正在制作一个HTML游戏，并希望添加屏幕按钮。
要做到这一点，我想我需要知道点击鼠标时的像素。
如果有人知道该怎么做或有另一种方法来制作按钮LMK。
答案 0 :(得分：2)
以下是查找鼠标位置的基础知识：
获取对您要侦听鼠标事件的DOM元素的引用。
var canvas=document.getElementById("canvas");
浏览器报告相对于窗口左上角的鼠标坐标，而不是相对于画布元素的鼠标坐标，因此您需要考虑窗口和窗口之间的差异。帆布位置。使用.getBoundingClientRect获取窗口中canvas元素的偏移量。
// save the canvas offset in global variables
var BB=canvas.getBoundingClientRect();
var BBoffsetX=BB.left;
var BBoffsetY=BB.top;
当用户通过订阅鼠标事件对鼠标执行某些操作时，告诉您想要被告知的浏览器。您可以使用.onmousedown, .onmousemove, .onmouseup & .onmouseout执行此操作，并在发生这些事件时执行浏览器功能。
// listen for mousedown events, call handleMousedown() when they occur
// listen for mousemove events, call handleMousemove() when they occur
// listen for mouseup events, call handleMouseup() when they occur
// listen for mouseout events, call handleMouseout() when they occur
canvas.onmousedown=handleMousedown;
canvas.onmousemove=handleMousemove;
canvas.onmouseup=handleMouseup;
canvas.onmouseout=handleMouseup;
通过编写鼠标处理函数来响应鼠标事件。浏览器在执行处理程序时会自动发送mouseevent参数。该mouseevent包含clientX & clientY属性，这些属性是相对于可见客户区左上角的X，Y坐标。要在画布中获取鼠标位置，您必须减去在步骤＃2中计算的BBoffsetX & BBoffsetY。
// this function is called every time the user presses the mouse down.
// "e" is the mouseevent argument the browser automatically sends
function handleMousedown(e){
// calculate the mouse position RELATIVE TO THE CANVAS
var mouseX=e.clientX-BBoffsetX;
var mouseY=e.clientY-BBoffsetY;
// you have the mouse position so now do your button stuff
}
如果窗口将滚动，则进行细化...如果页面内容大于浏览器显示区域中的内容，则浏览器将添加滚动条以允许用户滚动以查看所有页面内容。当窗口滚动时，在步骤＃2中计算的偏移将变为无效，因此必须重新计算它们。您可以订阅window.onscroll事件，并在滚动时重新计算偏移量。
// listen for events that invalidate the canvas offsets
window.onscroll=function(e){ setBB(); }
window.onresize=function(e){ setBB(); }
// recalculate the offsets
function setBB(){
BB=canvas.getBoundingClientRect();
BBoffsetX=BB.left;
BBoffsetY=BB.top;
}
关于您的自定义按钮
这是一个简单的按钮系统......
...欢迎你开始......
var $clicked=$('#clicked');
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
var BB=canvas.getBoundingClientRect();
offsetX=BB.left;
offsetY=BB.top;
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }
var clickedButton;
var buttons=[];
buttons.push(makeButton(1,20,20,50,20,'One','skyblue','gray','black',
function(){ $clicked.text('You clicked: '+this.id+' with label: '+this.label); },
function(){ $clicked.text('You released: '+this.id+' with label: '+this.label); }
));
buttons.push(makeButton(2,20,50,50,20,'Two','lightgreen','gray','black',
function(){ $clicked.text('You clicked: '+this.id+' with label: '+this.label); },
function(){ $clicked.text('You released: '+this.id+' with label: '+this.label); }
));
//
drawAll();
//
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mouseup(function(e){handleMouseUpOut(e);});
$("#canvas").mouseout(function(e){handleMouseUpOut(e);});
function makeButton(id,x,y,w,h,label,fill,stroke,labelcolor,clickFn,releaseFn){
return({
id:id,
x:x, y:y, w:w, h:h,
fill:fill, stroke:stroke, labelcolor:labelcolor,
label:label,
click:clickFn,
release:releaseFn
});
}
function drawAll(){
for(var i=0;i<buttons.length;i++){
drawButton(buttons[i],false);
}
}
function drawButton(b,isDown){
ctx.clearRect(b.x-1,b.y-1,b.w+2,b.h+2);
ctx.fillStyle=b.fill;
ctx.fillRect(b.x,b.y,b.w,b.h);
ctx.strokeStyle=b.stroke;
ctx.strokeRect(b.x,b.y,b.w,b.h);
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillStyle=b.labelcolor;
ctx.fillText(b.label,b.x+b.w/2,b.y+b.h/2);
if(isDown){
ctx.beginPath();
ctx.moveTo(b.x,b.y+b.h);
ctx.lineTo(b.x,b.y);
ctx.lineTo(b.x+b.w,b.y);
ctx.strokeStyle='black';
ctx.stroke();
}
}
function findButton(mx,my){
for(var i=0;i<buttons.length;i++){
var b=buttons[i];
if(mx>b.x && mx<b.x+b.w && my>b.y && my<b.y+b.h){
return(buttons[i]);
}
}
return(null);
}
function handleMouseDown(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// check if a button was clicked under the mouse
var b=findButton(mouseX,mouseY);
if(b){
clickedButton=b;
drawButton(b,true);
b.click();
}
}
function handleMouseUpOut(e){
// tell the browser we're handling this event
e.preventDefault();
e.stopPropagation();
// release any clicked button
if(clickedButton){
drawButton(clickedButton,false);
clickedButton.release();
clickedButton=null;
}
}body{ background-color: ivory; }
#canvas{border:1px solid red; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4 id=clicked>Click a button.</h4>
<canvas id="canvas" width=300 height=300></canvas>