这是一种使用 Canvas 获得所需效果的方法:
- 用透明的烧杯绘制图像
- 从下往上逐渐绘制原图
- 从而用流体填充透明烧杯。


你可以比我花更多的时间让烧杯变得透明;)
当然,您可以将绘图分成几列并以您需要的任何速度填充烧杯。
如果您需要不同的颜色来填充烧杯,可以使用 context.globalCompositeOperation="destination-over"。这种合成模式允许您“在”现有图形下“绘制”(新颜色只会填充现有图像上的透明像素)。
这是代码和小提琴:http: //jsfiddle.net/m1erickson/Enyjb/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red; border-radius:15px;}
canvas{position:absolute;}
</style>
<script>
$(function(){
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
// draw a background that fills the beakers with gray
var background=document.getElementById("background");
var bkCtx=background.getContext("2d");
bkCtx.fillStyle="rgb(234,234,234)";
bkCtx.fillRect(0,0,background.width,background.height);
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var y;
var img1=new Image();
img1.onload=function(){
ctx.drawImage(img1,0,0);
y=img1.height-50;
img2=new Image();
img2.onload=function(){
animate();
}
img2.src="https://dl.dropboxusercontent.com/u/139992952/temp01.png";
}
img1.src="https://dl.dropboxusercontent.com/u/139992952/temp02.png";
var fps = 30;
function animate() {
setTimeout(function() {
if(y<100){return;}
requestAnimFrame(animate);
// Drawing code goes here
y-=1;
ctx.drawImage(img2,
0,y,img2.width,img2.height-y,
0,y,img2.width,img2.height-y)
}, 1000 / fps);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="background" width=1024 height=327></canvas>
<canvas id="canvas" width=1024 height=327></canvas>
</body>
</html>