Question

因此，我想检查圆形是否与HTML5 Canvas中不透明的任何pixeldata相撞。

要收集pixeldata，您可以这样做：

ctx.getImageData(x, y, w, h)

要检查点是否在圆圈中，您只需使用毕达哥拉斯：

(x1-x0) * (x1-x0) + (y1-y0) * (y1-y0) < r * r

其中0是圆心，1是点的坐标，r是圆半径。

你是否有必要循环所有像素或什么？

让我们说：

Circles center is at: 300, 420
Circles radius is: 20
Canvas size is: 750 * 500 pixels

Answer 1

首先，您只需要检查圈子边界框内的图像数据：

var imageData = ctx.getImageData(c.x - c.radius, c.y - c.radius, c.radius * 2, c.radius * 2);
var pixels = imageData.data;

然后遍历该数据，获取颜色值和位置：

var w = imageData.width;
var h = imageData.height;

var l = w * h;
for (var i = 0; i < l; i++) {
    var r = pixels[i*4]; // Red
    var g = pixels[i*4+1]; // Green
    var b = pixels[i*4+2]; // Blue
    var a = pixels[i*4+3]; // Alpha

    // skip to next iteration if the alpha of this pixel is 0
    if(a === 0) {
        continue;
    }

    // get the position of this pixel
    var y = i / w;
    var x = i - y * w;

    // check for collision and exit is there is one
    if(isInCircle(x, y)) {
        collision = true;
        break;
    }
}

希望这能帮到你的路！

Canvas JavaScript - 检查圆形是否与pixeldata发生碰撞

1 个答案: