鼠标单击HTML5画布绘制矩形

Question

我有一个加载在选定图像中的画布。画布应显示用户单击的2个6x6矩形。在第一次单击时，矩形应该是红色，第二次单击它应该是第三次单击时的蓝色，它重置（删除两个第一个矩形），依此类推。 这样可以正常工作（参见示例：http://jsfiddle.net/8HSGG/）

我的问题是当我重新加载图像时，矩形开始变得混乱（即颜色的顺序不同或根本不显示）

我在javascript中有两个变量：topLeft和bottomRight，每当加载图像时都为null，然后根据这些变量进行检查并相应地绘制

有什么想法吗？

Answer 1

每次“处理”图像时，您都会向画布添加click和mouseover个事件侦听器。因此，我怀疑你得到的代码多次被调用。