0

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

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

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

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

我必须随机生成圆的坐标。

两个绘图功能都在一个循环内 - 设置间隔 - 和一个清晰的画布功能。

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

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

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

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

ctx.getImageData()
4

2 回答 2

0

在画布上绘制的任何内容都可以使用getImageData. 画布是附加了绘图助手的像素矩阵。

在画圆圈之前，你可以ctx.getImageData(x, y, 1, 1)检查它是否是红色的。您很可能必须检查圆边缘的像素，而不是中心。从圆方程开始。之前已经讨论过了。

于 2013-08-27T19:01:31.533 回答
0

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

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 ===> 矩形清除的约定来存储未绘制矩形。

然后，您可以在绘制圆圈时使用该数据，并进行经典的边界检查。

于 2013-08-27T18:22:30.243 回答