用动画填充颜色

用动画填充彩色canvas动态。 我创造了帆布圆筒，它填充了颜色。 当我动态填充颜色时我需要动画示例（慢慢填充它）。

我已经在谷歌搜索了，我得到了动画效果：动画function中的fadein / ease。

但没有什么对我有用

var perc = 0; $(document).ready(function () { $("#my_input").focusout(function (event) { if ($("#my_input").val().indexOf("%") != -1) { if ($.isNumeric($("#my_input").val().replace('%', ''))) { // Allow only backspace and delete if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 37) { //$("#myCanvas").animate({ opacity: 0.25 }); } else { // Ensure that it is a number and stop the keypress if (event.keyCode  57) { event.preventDefault(); } } perc = parseInt($("#my_input").val().replace('%', '')) / 100; draw(); } } else { alert('Value in %'); } }); }); function draw() { maxWidth = 180; maxHeight = 140; context.clearRect(0, 0, canvas.width, canvas.height); var x = 190; var y = 260; context.fillStyle = '#f2f2f2'; context.beginPath(); context.rect(x - maxWidth / 2, y - maxHeight, maxWidth, maxHeight); context.fill(); var per = perc; if (per > 1) perc = 1; // fill context.fillStyle = 'yellow'; context.beginPath(); context.rect(x - maxWidth / 2, y - maxHeight * perc, maxWidth, maxHeight * perc); context.fill(); drawCylinder(100, 100, 180, 180); context.beginPath(); }(function () { var lastTime = 0; var vendors = ['webkit', 'moz']; for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame']; } if (!window.requestAnimationFrame) window.requestAnimationFrame = function (callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function (id) { clearTimeout(id); }; }()); //the below code is to generate Cylinder object -- Mahadevan var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var degreeAngle = 0; requestAnimationFrame(animate); function drawRotatedCylinder(x, y, w, h, degreeAngle) { context.save(); context.translate(x + w / 10, y + h / 10); context.rotate(degreeAngle * Math.PI / 180); drawCylinder(-w / 10, -h / 10, w, h); context.restore(); } function drawCylinder(x, y, w, h) { context.beginPath(); //to draw the top circle for (var i = 0 * Math.PI; i < 2 * Math.PI; i += 0.01) { xPos = (x + w / 2) - (w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI); yPos = (y + h / 8) + (h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI); if (i == 0) { context.moveTo(xPos, yPos); } else { context.lineTo(xPos, yPos); } } context.moveTo(x, y + h / 8); context.lineTo(x, y + h - h / 8); for (var i = 0 * Math.PI; i < Math.PI; i += 0.01) { xPos = (x + w / 2) - (w / 2 * Math.sin(i)) * Math.sin(0 * Math.PI) + (w / 2 * Math.cos(i)) * Math.cos(0 * Math.PI); yPos = (y + h - h / 8) + (h / 8 * Math.cos(i)) * Math.sin(0 * Math.PI) + (h / 8 * Math.sin(i)) * Math.cos(0 * Math.PI); if (i == 0) { context.moveTo(xPos, yPos); } else { context.lineTo(xPos, yPos); } } context.moveTo(x + w, y + h / 8); context.lineTo(x + w, y + h - h / 8); context.strokeStyle = '#ff0000'; context.stroke(); context.fillStyle = 'yellow'; context.fill(); } function animate() { requestAnimationFrame(draw); context.animate({"Fill":yellow},Slow); drawRotatedCylinder(100, 100, 180, 180); draw(); } 

当我在drawRotateCylinder上面给出context.animate行时，我收到错误

在这里，我不希望我的rotatecylinder只需要在填充圆柱体的文本框中输入百分比值时所需的动画。

提前谢谢玛哈

Answer 1

仅在圆柱容器内部绘制的一种方法是使容器成为剪切区域。

这样，所有流体将仅在气缸容器内被抽出。

这是示例代码和演示： http ： //jsfiddle.net/m1erickson/Ndmvj/