0

我正在开发一个网络应用程序，让用户单击一个按钮（带有数字或数学符号值），然后在工作区中单击并显示相应的字符。到目前为止，这就是我对 Javascript 所做的：

<script type="text/javascript">
            var mathCanvas = document.getElementById("matharea");
            var ctx = mathCanvas.getContext("2d");
            ctx.font="18px Arial";

            var boolOne = 0;
            var boolTwo = 0;

            function insertOne(){
                boolOne = 1;
            };

            function insertTwo(){
                boolTwo = 1;
            };

            mathCanvas.onclick = function(event){
                var x = event.offsetX;
                var y = event.offsetY;
                if(boolOne == 1){
                    ctx.fillText("1",x-5,y-5);
                    boolOne = 0;
                };

                if(boolTwo == 1){
                    ctx.fillText("2",x-5,y-5);
                    boolTwo = 0;
                };
            };
</script>

现在我只使用 1 和 2 按钮进行测试。在两个“if”语句中，我在放置数字后将布尔值设置回 0，但显然最好允许用户继续放置相应的数字，直到按下另一个数字按钮，而不是一次性我在这里的功能。我可以想象在按下另一个特定按钮时重置布尔值，但是当按下任何其他按钮时，我如何将其更改回 0？

4

1 回答 1

1

您可以稍微改变您的逻辑，使其更加灵活。就像是：

var placementCallback = function() {}
function onButton1Click() {
 placementCallback = function(x, y) {
   ctx.fillText('1', x-5,y-5);
 }
}

function onButton2Click() {
 placementCallback = function(x, y) {
   ctx.fillText('2', x-5,y-5);
 }
}

mathCanvas.onclick = function(event){
  placementCallback(event.offsetX, event.offsetY);
}

这样，您就没有大量的 if 条件，并且您可以构建任意数量的按钮（并且它也满足您的“用户想要多少次”的要求，前提是您为即放置回调。

希望有帮助。

于 2012-11-13T20:45:16.343 回答