Javascript 如何在html5画布上定制绘制按钮

我正在制作一个html游戏，想添加屏幕上的按钮

要做到这一点，我想我需要知道当我点击鼠标时鼠标的像素是什么

---

如果有人知道怎么做，或者有其他方法制作按钮LMK

以下是找到鼠标位置的基础知识：

获取对要在其上侦听鼠标事件的DOM元素的引用

var canvas=document.getElementById("canvas");

浏览器报告相对于窗口左上角的鼠标坐标，而不是相对于画布元素的鼠标坐标，因此需要考虑窗口和画布位置之间的差异。使用

.getBoundingClientRect

获取窗口中画布元素的偏移量

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

如果窗口将被滚动，则会进行优化…如果页面内容大于浏览器显示区域中的大小，浏览器将添加滚动条，以允许用户滚动查看所有页面内容。当窗口滚动时，步骤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=画布宽度；
var ch=画布高度；
函数reOffset（）{
var BB=canvas.getBoundingClientRect（）；
offsetX=BB.left；
offsetY=BB.top；
}
var offsetX，offsetY；
reOffset（）；
onscroll=函数（e）{reOffset（）；}
onresize=函数（e）{reOffset（）；}
var点击按钮；
var按钮=[]；
按钮。按下（makeButton）（1,20,20,50,20，'One'，'skyblue'，'gray'，'black'，'，
函数（）{$clicked.text（'您单击了：'+this.id+'和标签：'+this.label）；}，
函数（）{$clicked.text（'youreleased:'+this.id+'with label:'+this.label）；}
));
按钮。按下按钮（2,20,50,50,20，'Two'，'lightgreen'，'gray'，'black'，'，
函数（）{$clicked.text（'您单击了：'+this.id+'和标签：'+this.label）；}，
函数（）{$clicked.text（'youreleased:'+this.id+'with label:'+this.label）；}
));
//
drawAll（）；
//
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUpOut（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handlemouseuput（e）；}）；
功能生成按钮（id、x、y、w、h、标签、填充、笔划、标签颜色、单击FN、释放FN）{
返回({
id:id，
x:x，y:y，w:w，h:h，
填充：填充，笔划：笔划，labelcolor:labelcolor，
标签：标签，
点击：点击fn，
释放：释放fn
});
}
函数drawAll（）{
对于（var i＝0；可能的副本）可能是有用的，不知道我怎么找不到。+ 1，我会指出，对于用户来说，如果鼠标超过按钮，OP应该考虑检查每一个MyMeFoE，并提供反馈（或者用适当的光标<代码> Cavas.Stulle。光标=“指针”；<代码>或按钮效果）。。这给整个用户界面带来了一种非常积极的感觉。此外，用户通常习惯于在点击中改变主意时从按钮上拖动。只有当向下和向上事件都在按钮上方时，才应注册点击。@Blindman67.好的观点！：-）对于生产，我当然会扩展我的（非常！）包含悬停/模糊效果的简单按钮，以及mouseup&mouseout中允许取消的另一个命中测试。对于变量b是什么感到困惑。变量
b
等于每个按钮对象，当我们在
按钮
数组中移动时--
b
是一个缓存变量。使用缓存变量的原因是我们没有缓存变量o使浏览器反复努力查找按钮数组中的第i个
元素。
// 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;
}