javascript - How can I fill canvas shape with animation? - Stack Overflow

admin管理员组

文章数量:1427755

I'm new to canvas. I have a drop canvas shape and want to fill it as animation.

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();

Drop shape start point as;

and shape end point as;

I want to fill it with animation, increase liquid slowly as in jquery animate function. How can I do this?

Code example

I'm new to canvas. I have a drop canvas shape and want to fill it as animation.

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();

Drop shape start point as;

and shape end point as;

I want to fill it with animation, increase liquid slowly as in jquery animate function. How can I do this?

Code example

• javascript
• jquery
• html
• animation
• canvas

Share Improve this question Follow edited May 4, 2014 at 20:41 WearFox 29333 silver badges1919 bronze badges asked May 4, 2014 at 19:52 midstackmidstack 2,12377 gold badges4848 silver badges7474 bronze badges 1

• You need to do it programatically. (Math) developer.mozilla/en-US/docs/Web/API/… – Dávid Szabó Commented May 4, 2014 at 19:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can use context.clip to restrict your liquid to drawing only in the container.

Here is example code and a Demo: http://jsfiddle/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);

本文标签： javascriptHow can I fill canvas shape with animationStack Overflow