Question

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

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

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

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

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

两个绘制函数都在循环 - 设置间隔内 - 以及一个清晰的画布函数。

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

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

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

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

ctx.getImageData()

Answer 1

您始终可以存储最后绘制的坐标。至少通过使用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 ===＆gt;的约定;矩形清除。

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

Answer 2

使用getImageData可以访问画布上绘制的内容。画布是附有绘图助手的像素矩阵。

在绘制圆圈之前，您可以ctx.getImageData(x, y, 1, 1)并检查它是否为红色。您最有可能必须检查圆圈边缘的像素，而不是中心。从圆方程开始。这是discussed before。

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

2 个答案: