Javascript HTML5画布：加载时绘制的贝塞尔曲线

我画了贝塞尔曲线。但是我想在onload中设置贝塞尔曲线的动画1次

请帮帮我

下面是代码：

window.onload=function（）{
var canvas=document.getElementById（'canvas'）；
var context=canvas.getContext（'2d'）；
变量x=10，y=25；
函数曲线（）{
context.beginPath（）；
上下文。moveTo（214,0）；
贝塞尔曲线图（328,80,153,82,216,162）；
context.lineWidth=10；
context.strokeStyle='gray'；
stroke（）；
}
曲线（）；
};
如果要设置曲线动画，可以按如下方式构造代码：

var snake = {
    points:[ {x:100,y:100},{x:100,y:150},{x:100,y:200},{x:100,y:250} ]
}

function loop(){
    physic( snake )
    display( snake )
}
setInterval( loop, 20 )

function display( snake ){

    var point = snake.points[0];

    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo( point.x, point.y );

    for( i=0; i< snake.points.length-1; i++ ){

        point = snake.points[i];

        var xc = (point.x + snake.points[i + 1].x) / 2;
        var yc = (point.y + snake.points[i + 1].y) / 2;

        ctx.quadraticCurveTo( point.x, point.y, xc, yc );
    }

    ctx.stroke();
}

在physic函数中，根据需要更新snake结构中的点。
在显示功能中，您可以执行以下操作：

var snake = {
    points:[ {x:100,y:100},{x:100,y:150},{x:100,y:200},{x:100,y:250} ]
}

function loop(){
    physic( snake )
    display( snake )
}
setInterval( loop, 20 )

function display( snake ){

    var point = snake.points[0];

    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.moveTo( point.x, point.y );

    for( i=0; i< snake.points.length-1; i++ ){

        point = snake.points[i];

        var xc = (point.x + snake.points[i + 1].x) / 2;
        var yc = (point.y + snake.points[i + 1].y) / 2;

        ctx.quadraticCurveTo( point.x, point.y, xc, yc );
    }

    ctx.stroke();
}

您可以通过作弊来获得效果，尽管动画不会根据线弯曲
（必须停止计时器，如果附近有其他绘制的对象，则此操作可能不起作用）


用什么样的方式制作动画？用蛇的运动制作动画是可能的，谢谢你的支持…但真的很抱歉…我需要贝塞尔曲线，但这里声明的是二次曲线…还有一个物理（蛇）这个函数不起作用…这只是一个例子。在显示功能中，您可以很容易地用贝塞尔曲线替换二次曲线。很抱歉，我需要填充样式“透明”，这可能吗。。？