Canvas不规则图形面积计算方法

在HTML5 Canvas中计算不规则图形的面积有几种常用方法，以下是几种有效的解决方案：

1. 使用扫描线算法(Scanline Algorithm)

function calculateArea(points) {
    let area = 0;
    const n = points.length;

    for (let i = 0; i < n; i++) {
        const j = (i + 1) % n;
        area += points[i].x * points[j].y;
        area -= points[j].x * points[i].y;
    }

    return Math.abs(area) / 2;
}

// 示例使用
const polygon = [
    {x: 0, y: 0},
    {x: 100, y: 0},
    {x: 100, y: 100},
    {x: 0, y: 100}
];
console.log(calculateArea(polygon)); // 输出: 10000

2. 使用Canvas的isPointInPath方法

function calculateAreaWithCanvas(points) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 绘制路径
    ctx.beginPath();
    ctx.moveTo(points[0].x, points[0].y);
    for (let i = 1; i < points.length; i++) {
        ctx.lineTo(points[i].x, points[i].y);
    }
    ctx.closePath();

    // 获取边界
    const bounds = getBounds(points);
    let area = 0;

    // 遍历边界内的每个像素
    for (let x = bounds.minX; x < bounds.maxX; x++) {
        for (let y = bounds.minY; y < bounds.maxY; y++) {
            if (ctx.isPointInPath(x, y)) {
                area++;
            }
        }
    }

    return area;
}

function getBounds(points) {
    let minX = Infinity, minY = Infinity;
    let maxX = -Infinity, maxY = -Infinity;

    points.forEach(p => {
        minX = Math.min(minX, p.x);
        minY = Math.min(minY, p.y);
        maxX = Math.max(maxX, p.x);
        maxY = Math.max(maxY, p.y);
    });

    return { minX, minY, maxX, maxY };
}

3. 使用格林公式(Green's Theorem)

function calculateAreaWithGreensTheorem(points) {
    let area = 0;
    const n = points.length;

    for (let i = 0; i < n; i++) {
        const j = (i + 1) % n;
        area += (points[i].x + points[j].x) * (points[j].y - points[i].y);
    }

    return Math.abs(area) / 2;
}

性能优化建议

1. 对于简单多边形：使用扫描线算法或格林公式，计算速度快，精度高
2. 对于复杂图形：使用Canvas的isPointInPath方法，虽然较慢但能处理任意形状
3. 精度要求高时：可以考虑使用WebGL或第三方库如Turf.js

第三方库推荐

• Turf.js：强大的地理空间分析库
• Paper.js：矢量图形处理库
• Fabric.js：Canvas库，包含一些几何计算功能

选择哪种方法取决于您的具体需求：简单多边形可以使用数学公式，复杂不规则图形可能需要Canvas API或第三方库。