如何用动画填充画布形状？

Question

我是画布的新手。我有一个下拉画布形状，并希望将其填充为动画。

HTML

 <canvas id="canvas" width="500" height="500"></canvas>

JS

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");


context.beginPath();
context.moveTo(109,15);
context.bezierCurveTo(121,36,133,57,144,78);
context.bezierCurveTo(160,109,176,141,188,175);
context.bezierCurveTo(206,226,174,272,133,284);
context.bezierCurveTo(79,300,24,259,25,202);
context.bezierCurveTo(25,188,30,174,35,161);
context.bezierCurveTo(53,115,76,73,100,31);
context.bezierCurveTo(103,26,106,21,109,15);
context.lineWidth = 10;
context.strokeStyle="#0092f9";
context.stroke();

context.fillStyle="rgb(43,146,255)";
context.beginPath();
context.moveTo(181,229);
context.bezierCurveTo(179,232,178,235,176,238);
context.bezierCurveTo(171,247,165,254,158,260);
context.bezierCurveTo(150,266,141,269,132,272);
context.bezierCurveTo(126,274,119,275,112,275);
context.bezierCurveTo(108,276,104,275,100,275);
context.bezierCurveTo(92,274,84,272,76,269);
context.bezierCurveTo(67,265,60,259,53,251);
context.bezierCurveTo(48,245,43,238,39,231);
context.bezierCurveTo(39,230,38,230,39,229);
context.bezierCurveTo(39,228,40,229,40,229);
context.bezierCurveTo(52,230,63,231,75,230);
context.bezierCurveTo(79,229,84,228,89,228);
context.bezierCurveTo(97,227,104,227,112,229);
context.bezierCurveTo(116,230,120,230,124,230);
context.bezierCurveTo(130,231,137,231,143,231);
context.bezierCurveTo(148,231,153,230,158,230);
context.bezierCurveTo(165,229,173,228,181,229);
context.fill();

将形状起点丢弃为;

并将终点形状设为;

我想用动画填充它，慢慢增加液体，如jquery动画功能。我怎么能这样做？

Code example

Answer 1

您可以使用context.clip将液体限制为仅在容器中绘制。

以下是示例代码和演示：http://jsfiddle.net/m1erickson/jM4hW/

// draw the container

ctx.beginPath();
ctx.moveTo(109,15);
ctx.bezierCurveTo(121,36,133,57,144,78);
ctx.bezierCurveTo(160,109,176,141,188,175);
ctx.bezierCurveTo(206,226,174,272,133,284);
ctx.bezierCurveTo(79,300,24,259,25,202);
ctx.bezierCurveTo(25,188,30,174,35,161);
ctx.bezierCurveTo(53,115,76,73,100,31);
ctx.bezierCurveTo(103,26,106,21,109,15);
ctx.lineWidth=linewidth;
ctx.strokeStyle=strokestyle;
ctx.stroke();

// make the container a clipping region
// all subsequent drawings will only appear inside the container

ctx.clip();

// now draw the liquid
// the liquid will be drawn only where
// it is inside the clipping region (the container)

ctx.fillRect(0,150,canvas.width,500);

Answer 2

人很容易......只需添加bezierCurveTo(165,229,173,228,181,229)，然后继续制作 coordinates 并添加到函数Animation(index,limit)

所以索引 - 是动画的开始 所以限制 - 是动画的结束

这里所有的代码......

window.onload = function(){

    var delay = 100;
    var canvas = document.getElementById("canvas"),

    context = canvas.getContext("2d");

    context.beginPath();
    context.moveTo(109,15);
    context.bezierCurveTo(121,36,133,57,144,78);
    context.bezierCurveTo(160,109,176,141,188,175);
    context.bezierCurveTo(206,226,174,272,133,284);
    context.bezierCurveTo(79,300,24,259,25,202);
    context.bezierCurveTo(25,188,30,174,35,161);
    context.bezierCurveTo(53,115,76,73,100,31);
    context.bezierCurveTo(103,26,106,21,109,15);
    context.lineWidth = 10;
    context.strokeStyle="#0092f9";
    context.stroke();


    function Animation(index,limit){

        var canvas = document.getElementById("canvas"),
            context = canvas.getContext("2d");

        context.clearRect(0, 0, canvas.width, canvas.height);

        context.beginPath();
        context.moveTo(109,15);
        context.bezierCurveTo(121,36,133,57,144,78);
        context.bezierCurveTo(160,109,176,141,188,175);
        context.bezierCurveTo(206,226,174,272,133,284);
        context.bezierCurveTo(79,300,24,259,25,202);
        context.bezierCurveTo(25,188,30,174,35,161);
        context.bezierCurveTo(53,115,76,73,100,31);
        context.bezierCurveTo(103,26,106,21,109,15);
        context.lineWidth = 10;
        context.strokeStyle="#0092f9";
        context.stroke();

        context.fillStyle="rgb(43,146,255)";
        context.beginPath();
        context.moveTo(181,229);
        if(index>0){context.bezierCurveTo(179,232,178,235,176,238);}
        if(index>1){context.bezierCurveTo(171,247,165,254,158,260);}
        if(index>2){context.bezierCurveTo(150,266,141,269,132,272);}
        if(index>3){context.bezierCurveTo(126,274,119,275,112,275);}
        if(index>4){context.bezierCurveTo(108,276,104,275,100,275);}
        if(index>5){context.bezierCurveTo(92,274,84,272,76,269);}
        if(index>6){context.bezierCurveTo(67,265,60,259,53,251);}
        if(index>7){context.bezierCurveTo(48,245,43,238,39,231);}
        if(index>8){context.bezierCurveTo(39,230,38,230,39,229);}
        if(index>9){context.bezierCurveTo(39,228,40,229,40,229);}
        if(index>10){context.bezierCurveTo(52,230,63,231,75,230);}
        if(index>11){context.bezierCurveTo(79,229,84,228,89,228);}
        if(index>12){context.bezierCurveTo(97,227,104,227,112,229);}
        if(index>13){context.bezierCurveTo(116,230,120,230,124,230);}
        if(index>14){context.bezierCurveTo(130,231,137,231,143,231);}
        if(index>15){context.bezierCurveTo(148,231,153,230,158,230);}
        if(index>16){context.bezierCurveTo(165,229,173,228,181,229);}
        context.fill();

    if(index<limit){setTimeout(function(){Animation(index+1,limit);},delay);}

    }

    setTimeout(function(){Animation(1,17);},delay);

};

<强> Live CODE