我正在创建一个简单的计算器。Here http://startupsandfinance.com/online_calculator.html这是。我几乎完成了基本设计，但我对如何使按钮可点击感到困惑？一个技巧可能是为每个按钮创建一个 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>
您可以通过侦听鼠标单击来“按下”画布上的绘制键，然后测试单击位置是否位于计算器键的任一边界内。
如果鼠标单击位于矩形内，以下代码将返回 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 );
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
