Fatal编程技术网

使javascript画布矩形可单击

javascript canvas

使javascript画布矩形可单击,javascript,canvas,Javascript,Canvas,我正在创建一个简单的计算器。它是。我几乎完成了基本设计，但我不知道如何使按钮可点击？一个技巧可能是为每个按钮创建一个div，但我认为必须有一个简单的方法。请导游。谢谢 <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="400" style="border:2px solid ;"> Your browser does not support the HT

我正在创建一个简单的计算器。它是。我几乎完成了基本设计，但我不知道如何使按钮可点击？一个技巧可能是为每个按钮创建一个div，但我认为必须有一个简单的方法。请导游。谢谢

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="400" style="border:2px solid ;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,80);
ctx.lineTo(300,80);
ctx.fillStyle="#333333";
ctx.fillRect(0,320,50,80);

ctx.fillStyle="#333333";
ctx.fillRect(250,320,50,80);
ctx.stroke();

</script>

</body>
</html>


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.moveTo（0,80）；
ctx.lineTo（300,80）；
ctx.fillStyle=“#333”；
ctx.fillRect（0320,50,80）；
ctx.fillStyle=“#333”；
ctx.fillRect（250320,50,80）；
ctx.stroke（）；
一种可能是使用计算器的实际图像，然后您可以使用来定义按钮的位置

更新：，类似于本页其他地方给出的SVG示例。

如果您希望绑定到图形元素，我建议您使用SVG。canvas元素不允许绑定，因为其图形不被视为DOM的一部分。有关绑定到SVG元素的演示，请参见

因为这看起来像是纯图形，我过去做过的一件事就是听鼠标按下的位置，检查我是否在按钮内部单击。这是相当手工的；基本上，您将创建自己的按钮/按钮基本处理结构

它看起来像：

// define some button objects (can also set the press handlers, etc)
// this should actually be in a Button ‘class’ of some sort
var buttonA = {x: 0, y: 320, width: 50, height: 80};
var buttonB = {x: 250, y: 320, width: 50, height: 80};

//insert some rendering code to draw the buttons based on the button objects above

// and when the mouse has been pressed
function mousePressed(inputEvent){
     // loop in here to check which button has been pressed by going through the button objects and responding as needed
}
canvas.addEventListener(“click”, mousePressed, false);
我认为这基本上是在重新设计轮子，所以我首先要检查是否存在现有的库/框架（我这样做是为了学习）。

您可以“按”通过侦听鼠标单击，然后测试单击位置是否在计算器键的任何一个边界内，在画布上绘制键

如果鼠标单击位于矩形内，以下代码将返回true：

function isPointInsideRect(pointX,pointY,rectX,rectY,rectWidth,rectHeight){
    return  (rectX <= pointX) && (rectX + rectWidth >= pointX) &&
                 (rectY <= pointY) && (rectY + rectHeight >= pointY);
}

函数ispoint（pointX，pointY，rectX，rectY，rectWidth，rectHeight）{
返回（rectX=pointX）&&
（rectY=pointY）；
}
如果您的计算器按钮是圆形的，以下代码将在圆形内点击鼠标：

function isPointInsideCircle(pointX,pointY,circleX,circleY,radius){
    var dx=circleX-pointX;
    var dy=circleY-pointY;
    return  ( dx*dx+dy*dy<=radius*radius  );
}

函数isPointInsideCircle（pointX、pointY、circleX、circleY、radius）{
var dx=圆点x；
var dy=圆形尖头；

return（dx*dx+dy*dyYes我有这个想法，但这将是一个糟糕的编程实践，因为加载时间会减少。我看不出有任何理由将此方法归类为糟糕的编程实践。那么“加载时间会减少”是什么意思？这听起来很有黑客味，就像在页面上悬停div一样。这需要对所有内容进行定位，以便重新调整大小不会破坏布局。但是，如果您必须使用画布绘制计算器，它会起作用。没有提到调整计算器的大小，即使这样，也可以非常不夸张地处理。如果您觉得它很有趣的话cky要使用map/area，请随时告诉W3C，这是一个在我记忆中已经存在了很长时间的标准，并且是一个尽可能多的跨浏览器的标准：我并不是说我的评论对你来说是一个侮辱。但我也要指出，使用表格进行网站布局曾经是W3C事实上的标准。我这样说是因为因为有些东西已经存在很长时间了，但这并不意味着按照今天的标准它不是“黑客”的。随着HTML5的迅速采用，有很多方法可以优雅地解决像这样的问题，这过去需要一种更具创造性的方法。不！永远不要给我代码。代码可能工作得很好，但就像类固醇一样。