Javascript 检查HTML5画布上绘制的矩形的颜色，确保不要在其上绘制圆形

假设我在html画布上绘制一个矩形：

draw.rect(x, y, w, h, color); // color red

绘制矩形后，我将在同一画布上绘制一个圆：

draw.circle(x, y, d, color); // color green

我必须随机生成圆的坐标

这两个绘图函数都位于循环集间隔和清除画布函数内

我想知道是否有办法确保我不会在矩形上画圆。

在正常情况下，这很容易，只需记住矩形的最后一个坐标，并为圆选择不同的坐标即可——但由于其他原因，我无法这样做

是否可以检查画布上绘制的矩形的颜色，并确保不会在该颜色上绘制圆形

我知道如何分析背景图像的颜色，但我不知道上述方法是否可行。 对于背景图像，我使用：

ctx.getImageData()

---

您将始终能够存储最后绘制的坐标。 至少通过使用glval变量，您可以使其不那么难看 通过使用命名空间：

window.myApp = {};
myApp.lastDrawnRect = { x:-1, y:0, w:0, h:0 };
myApp.storeRect= function(x,y,w,h) {
             var rect = myApp.lastDrawnRect;
             rect.x = x; rect.y = y; rect.w = w;
}

绘制矩形时，可以存储坐标：

raw.rect(x, y, w, h, color); // color red
myApp.storeRect(x,y,w,h);

您可能希望存储矩形不是由 采用x==-1==>矩形清除的约定

然后，在绘制圆时可以使用这些数据

---

经典的边界检查。

可以使用

getImageData

访问画布上绘制的任何内容。 画布是附加了绘图辅助对象的像素矩阵

在绘制圆之前，您可以

ctx.getImageData（x，y，1，1）

并检查它是否为红色。 您很可能需要检查圆边缘的像素，而不是圆心。 从圆方程开始。

---

已经过了。

矩形的颜色是否只会出现在绘制矩形的位置？也就是说，是否会在画布上绘制与矩形颜色相同的其他元素？是的，如果矩形为红色，则不会绘制其他红色元素。这就是为什么我希望有办法。使用红色矩形和绿色圆圈绘制白色画布-在除红色之外的任何位置绘制绿色圆圈。即使绘制其他对象，也要使用另一个临时画布：作为globalCompositeOperation，使用“source over”绘制矩形，然后使用“destination over”绘制圆圈。然后在主屏幕上复制临时画布。比get/putImageData快得多，尤其是在创建重复使用相同临时画布（其大小为：rect+circle大小之和）的情况下。