Question

我正在创建一个简单的计算器。 Here它是。我几乎完成了基本设计，但我对如何使按钮可点击感到困惑？一个技巧可能是为每个按钮创建一个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>

Answer 1

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

如果鼠标点击在矩形内，则返回true的代码：

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

如果您的计算器按钮是圆形的，这里的代码将在圆圈内点击鼠标：

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

Answer 2

可能是使用计算器的实际图像，然后您可以使用HTML map来定义按钮的位置。

更新：here is an example of map/area in use，类似于本页其他地方给出的SVG示例。

Answer 3

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

Answer 4

由于这看起来都是纯粹的图形，我过去做过的一件事就是只听老鼠按下的位置并检查我是否点击了按钮内部。这很漂亮;基本上你要制作自己的按钮/按钮基元处理结构。

看起来像是：

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

我认为它基本上是在这里重新发明轮子所以我先检查是否有现有的库/框架（我这样做是为了学习练习）。

使javascript画布矩形可单击

4 个答案: