Question

我必须找到y = x * x曲线下的区域，并用随机分布的红色圆圈填充该区域。我到目前为止的进展

for (x=150; x<=750; x++)
    {
            y=-1/300*(x-450)*(x-450) +470

        if (x==0)
        {
            ctx.moveTo(x,y);
        }   

        else
        {
            ctx.lineTo(x,y);
        }

    }
    ctx.stroke();



    iMax=1000
    for (i=0; i<=iMax;i++)
    {
        x=150 + Math.floor((Math.random()*600));

        y=170 + Math.floor((Math.random()*300));

        d=-1/300*(x-450)*(x-450) +470

        if(d<y)
        {
            ctx.beginPath();
            ctx.arc(x,y,2,0,2*Math.PI);
            ctx.strokeStyle = 'red';
            ctx.stroke();

        }

        else

        {
            ctx.beginPath();
            ctx.arc(x,y,2,0,2*Math.PI);
            ctx.stroke();
        }
    }

但我无法弄清楚如何确定曲线下面的区域，我需要帮助。

Answer 1

您可以使用计数积分，例如：

var ySum = 0;
for (x=150; x<=750; x++)
{
        y=-1/300*(x-450)*(x-450) +470;
        ySum += 470 - y - 1;// 1 is line width

    if (x==0)
    {
        ctx.moveTo(x,y);
    }   

    else
    {
        ctx.lineTo(x,y);
    }

}
alert(ySum);//area below curve
ctx.stroke();



iMax=1000
for (i=0; i<=iMax;i++)
{
    x=150 + Math.floor((Math.random()*600));

    y=170 + Math.floor((Math.random()*300));

    d=-1/300*(x-450)*(x-450) +470

    if(d<y)
    {
        ctx.beginPath();
        ctx.arc(x,y,2,0,2*Math.PI);
        ctx.strokeStyle = 'red';
        ctx.stroke();

    }

    else

    {
        ctx.beginPath();
        ctx.arc(x,y,2,0,2*Math.PI);
        ctx.stroke();
    }
}

如何在功能曲线下找到区域HTML Canvas

1 个答案: