javascript - HTML5 Canvas 上鼠标点击绘制矩形

Question

我有一个 Canvas ，可以加载选定的图像。 Canvas 应在用户单击的位置显示 2 个 6x6 矩形。第一次单击时，矩形应为红色，第二次单击时，第三次单击时应为蓝色，它会重置(删除第一个矩形)，依此类推。这工作正常(参见此处的示例:http://jsfiddle.net/8HSGG/)

我的问题是，当我重新加载图像时，矩形开始困惑(即颜色以不同的顺序出现或根本不显示)。

我在Javascript中有两个变量:topLeft和bottomRight，每当加载图像时它们都是空的，然后根据这些变量进行检查并相应地进行绘制。

知道发生了什么吗？

Answer 1

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