用动画填充颜色 [英] Fill color with animation

问题描述

使用动画填充颜色画布动态。我已经创建了画布圆柱，它填充的颜色。我需要动画，当我动态填充颜色示例（慢慢填充）。

Fill color canvas dynamic with animation. I have created canvas cylinder and it was filling the color. I need animation when I fill the color dynamically Example (slowly filling it).

我在google做搜索，我得到的结果为put animate：fadein / ease动画功能。

I have did search in google and I got the result as put animate :fadein / ease in the animation function.

但对我来说没有用。

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

当我给上下文context.animate行drawRotateCylinder时我收到错误

When I gave context.animate line above drawRotateCylinder I am getting error

这里我不想要我的旋转圆柱只需要一个动画，当我在填充圆柱体的文本框中输入Percentage值。

Here I don't want to my rotatecylinder just an animation required when I enter Percentage value in the textbox filling the cylinder.

提前感谢
Maha

Thank you in advance Maha

推荐答案

只在圆柱体容器内绘制的一种方法是使容器剪切区域。

One way to draw only inside a cylinder container is to make the container a clipping region.

这样，所有的流体都将仅在圆柱形容器内部被抽出。

This way all the fluid will be drawn only inside the cylinder container.

下面是示例代码和演示： http://jsfiddle.net/m1erickson/Ndmvj/

Here's example code and a Demo: http://jsfiddle.net/m1erickson/Ndmvj/

<!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;}
</style>
<script>
$(function(){

    // canvas related variables
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;

    // general variables
    var PI=Math.PI;
    var PI2=PI*2;

    // cylinder related variables
    var cx=cw/2;
    var cy=ch/2;
    var width=65;
    var height=100;
    var fillY=cy+height/2+5;
    var w2=width/2;
    var h2=height/2;
    var h4=height/4;
    var h8=height/8;
    var h16=height/16;
    var ytop=-h2+h8;
    var cpYtop=-h2-h16;
    var ybottom=h2-h8;
    var cpYbottom=h2+h16;
    var degreeAngle,rAngle,dx,dy,r,a,xx,yy;

    // start the cylinder upright (at 0 degree angle)
    setContainerAngle(0);

    // start the animations
    requestAnimationFrame(animateFill);

    // animate filling the cylinder
    function animateFill(){
        if(fillY>cy-height/2+h8){
            requestAnimationFrame(animateFill);
        }else{
            requestAnimationFrame(animateEmpty);
        }
        draw();
        drawPouring(cx,0,fillY);
        fillY-=0.50;
    }

    // animate emptying the cylinder
    function animateEmpty(){
        if(degreeAngle>-91){
            requestAnimationFrame(animateEmpty);
        }else{
            fillY=cy+height/2+5;
            requestAnimationFrame(animateToBeginning);
        }
        draw();
        drawPouring(xx,yy,ch);    
        setContainerAngle(degreeAngle-0.50);
    }

    // animate rotating the empty cylinder back to upright
    function animateToBeginning(){
        if(degreeAngle<=0){
            requestAnimationFrame(animateToBeginning);
        }else{
            setContainerAngle(0);
            requestAnimationFrame(animateFill);
        }
        draw();
        setContainerAngle(degreeAngle+1);
    }


    // draw the scene (background, cylinder, liquid in cylinder)
    function draw(){

        ctx.fillStyle="gray";
        ctx.fillRect(0,0,cw,ch);

        ctx.save();

        defineFillOutline(cx,cy,width,height,degreeAngle);

        if(degreeAngle>=-90){
            ctx.clip();
            ctx.fillStyle='gold';
            ctx.fillRect(0,Math.max(fillY,yy),cw,ch);
        }

        ctx.restore();

        drawContainer(cx,cy,width,height,degreeAngle);

    }

    // draw the liquid being poured in a vertical stream
    function drawPouring(xx,yy,yyy){
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(xx,yy);
        ctx.lineTo(xx,yyy);
        ctx.lineWidth=5;
        ctx.shadowColor="gold";
        ctx.shadowBlur=8;
        ctx.strokeStyle="gold";
        ctx.stroke();
        ctx.restore();
    }

    // define the clipping region (which is the cylinder)
    function defineFillOutline(x,y,w,h,degrees){
        ctx.save();
        ctx.translate(x,y);
        ctx.rotate(degreeAngle*PI / 180);
        //
        ctx.beginPath();
        ctx.moveTo(-w2,ytop);
        ctx.bezierCurveTo( -w2,cpYtop, w2,cpYtop, w2,ytop);
        ctx.lineTo(w2,h2-h8);
        ctx.bezierCurveTo( w2,cpYbottom, -w2,cpYbottom, -w2,ybottom);
        ctx.closePath();
        //
        ctx.restore();
    }

    // draw the cylinder at the specified angle
    function drawContainer(cx,cy,width,height,degreeAngle){
        //
        defineFillOutline(cx,cy,width,height,degreeAngle);
        //
        ctx.save();
        ctx.translate(cx,cy);
        ctx.rotate(degreeAngle*PI / 180);

        // this is the top-outer lip of the cylinder
        ctx.moveTo(-w2,-h2+h8);        
        ctx.bezierCurveTo( -w2,-h4, w2,-h4, w2,-h2+h8);
        ctx.strokeStyle="royalblue";
        ctx.lineWidth=2;
        ctx.stroke();
        //
        ctx.restore();
    }

    // change the angle of the cylinder
    function setContainerAngle(degrees){
        degreeAngle=degrees;
        rAngle=degreeAngle*Math.PI/180;
        dx=width/2;
        dy=height/2-height/8;
        r=Math.sqrt(dx*dx+dy*dy);
        a=Math.atan2(dy,dx)+Math.PI+rAngle;
        xx=cx+r*Math.cos(a);
        yy=cy+r*Math.sin(a);
    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

这篇关于用动画填充颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！