CODEWITHSUNDEEP
animationcanvasdynamicfilleaseljs
Ashutosh
Ashutosh

Reputation: 1

How to fill a shape gradually?

I am looking for a feasible solution for this easeljs application of mine I've created. I want to fill color gradually(dynamically) in the parts of this shape with the help of easeljs only so that it will look like I'm filling the fuel tank.

function tankInit() {
	var x = 100;
    var y = 20;
    var width = 120;
    var height = 210;
	var stage = new createjs.Stage("fuelTank");
	stage.scaleX = 1.2;
	stage.scaleY = 1.2;
	

	var rectangle1 = new createjs.Shape();
	rectangle1.graphics.beginLinearGradientFill(["#00abe5","#005f7f"], [0.2, 0.8], x/8, y/2, x, y/2).drawRect(x, 210 , -height, 15);
	stage.addChild(rectangle1);
    
	var ellipse1 = new createjs.Shape();
	// ellipse1.graphics.beginStroke("#C0C0C0"); 
	ellipse1.graphics.beginLinearGradientFill(["#939393","#d3d3d3"], [0.8, 0.2], 7*x/4, x, x, x).drawEllipse(x, 55, width, 2*height / 24);
// ellipse1.graphics.endStroke(); 
	stage.addChild(ellipse1);
	
	ellipse1.graphics.moveTo(x, y + height / 8);
    ellipse1.graphics.lineTo(x, y + 7 * height / 8);
    ellipse1.graphics.moveTo(x, y + height / 8);
    ellipse1.graphics.lineTo(x, y + 7 * height / 8);
	
	var ellipse2 = new createjs.Shape();
	ellipse2.graphics.beginLinearGradientFill(["#0098cc","#005f7f"], [0.2, 0.8], 7*x/5, y, 7*x/10, x).drawEllipse(x, 210, width, 2*height / 11);
	stage.addChild(ellipse2);
	
	var rectangle2 = new createjs.Shape();
	rectangle2.graphics.beginLinearGradientFill(["#bdbdbd","#939393"], [0.7, 0.3], 2*x, x, y, 2*y).drawRect(x, 66, width, height / 6);
	stage.addChild(rectangle2);
	

	var rectangle3 = new createjs.Shape();
	rectangle3.graphics.beginLinearGradientFill(["#005f7f","#0098cc"], [0.7, 0.3], 2*x, 2*y, y, 2*y).drawRect(x, 100, width, 130);
	stage.addChild(rectangle3);
	
	
	var rectangle4 = new createjs.Shape();
	/*rectangle4.graphics.beginLinearGradientFill(["#0098cc","#00abe5"], [0.7, 0.3], x/2, y/4, x/4, y/6)*/
	/*rectangle4.graphics.beginLinearGradientFill(["#FFFFFF", "#0098cc", "#FFFFFF"], [0.2, 0.6, 0.2], [0, 127, 255], 120 , y, x, y).drawRect(x+width, 95, 122, 15);*/
	rectangle4.graphics.beginLinearGradientFill(["rgba(255,255,255,0)", "rgba(0,133,178,1)","rgba(255,198,255,0)"], [0.1,0.7, 0.3], 0, 50, 0,   130).drawRect(x+width, 95, 122, 15);
	stage.addChild(rectangle4);
	
	
	
	
	
	stage.update();
	
 
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.createjs.com/easeljs-0.8.1.min.js"></script>
<title>Fuel Tank HTML5 Canvas</title>
<head>

<body onload="tankInit();">
 <canvas id="fuelTank" width="1000" height="1000" ></canvas>

Upvotes: 0

Views: 366

Answers (1)

gskinner
gskinner

Reputation: 2488

You can do this by simply animating the height of your "fluid" over time. The easiest way would be by using TweenJS to tween the scaleY property. See this demo for an implementation example: http://jsfiddle.net/sud05dp5/

Upvotes: 1

Related Questions