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

Canvas JavaScript - Check if circle shape collides with pixeldata

本文关键字：是否 pixeldata 碰撞 JavaScript 检查 Canvas      更新时间：2023-09-26

所以，我想检查一个圆形是否与任何在HTML5 Canvas中不透明的pixeldata碰撞。

要收集pixeldata，只需执行:

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

检查point是否在圆内只需使用pythagoras:

(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

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

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;
    }
}

希望这对你有帮助!

相关文章：