单击 canvas 个形状的条件？

Question

我不明白为什么在其他部分我的条件是假的这是我的代码地址：我不知道这种情况是否正常工作（js 部分第 49 行）？ fiddle

<div id="ways" style="width:1000px;margin:0 auto;height:100%;">
    <canvas id="canvas" width="1000" height="1000"></canvas>
</div>

Answer 1

当你的turnclicking变量变成3+时，这部分：

while (circle = circles[i++]) {
            context.beginPath();
            context.arc(circle.x, circle.y, circle.radius, 0, 2 * Math.PI);
            if (context.isPointInPath(x, y) && (circle.clicked && (cnt == 0))) {
                cnt++;
                console.log("Cnt1: " + cnt);
                break;
            } else {
                alert("You can't go there!  " + (circle.clicked && (cnt == 0)) + "   " + context.isPointInPath(x, y) + "  " + x + "   " + y);
                break;
            }
        }

只会检查第一个圆圈 - 因为如您所见，if 和 else 函数都会导致中断。

这就是为什么您的代码仅在前 3 次点击时工作正常，之后唯一不会失败的圆圈是第一次点击（尽管不知道应用程序的目的是什么）。

要修复它，最好遍历所有 6 个圆圈，查看是否单击了其中一个，然后 只有在那之后 显示错误警报以防没有圆圈被点击了。

这是首先检查所有点击的圆圈的版本，如果 none 个被点击则抛出警报：http://jsfiddle.net/5pq23me2/6/

单击 canvas 个形状的条件？

Condition for clicking on canvas shapes?

javascript

canvas

conditional-statements