Question

我正在为我创建的这个画架应用寻找一个可行的解决方案。我想在这个形状的部分逐渐（动态地）填充颜色，只有画架的帮助才能看起来像是在填充油箱。

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>

Answer 1

你可以通过简单地设置＆＃34;流体的高度来实现这一点。随着时间的推移。最简单的方法是使用TweenJS补间scaleY属性。有关实现示例，请参阅此演示： http://jsfiddle.net/sud05dp5/

如何逐渐填充形状？

1 个答案: