Question

我正在使用动画动态处理Canvas对象填充色块。我已经创建了Cylinder和动画工作正常。现在它自动填充颜色。但我想要的是当我在文本框中输入百分比值时，圆柱体已填充颜色。

function drawContainer(cx, cy, width, height, degreeAngle) 
{
    ctx.fillStyle = '#E2E2E2';
    ctx.beginPath();        
    ctx.fill();
    defineFillOutline(cx, cy, width, height, degreeAngle);
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(degreeAngle * PI / 180);
    ctx.moveTo(-w2, -h2 + h8);
    ctx.bezierCurveTo(-w2, -h4, w2, -h4, w2, -h2 + h8);
    ctx.strokeStyle = "royalblue";
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.restore();
}

这是JSFiddle中的整个代码

http://jsfiddle.net/8b9G8/

提前致谢诗

Answer 1

此代码读取文本框中的更改并根据0-100的范围填充柱面：

带注释的代码和演示：http://jsfiddle.net/m1erickson/LVW37/

enter image description here

<!doctype html>
<html lang="en">
<head>
  <style>
      body{ background-color: ivory; }
      canvas{ border:1px solid red;}
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script>

  $(function() {

    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 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;
    var bottomFillY=cy+height/2+5;
    var topFillY=cy-height/2+h8
    var fillY=bottomFillY;

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

    // draw the scene
    draw();

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

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

        // save the context state
        ctx.save();

        // apply transforms
        ctx.translate(cx,cy);
        ctx.rotate(degreeAngle*PI / 180);

        // draw the cylinder clipping region
        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.clip();

        // draw the fluid clipped inside the container
        ctx.fillStyle='gold';
        ctx.fillRect(-cx,fillY-cy,cw,ch);

        // draw 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();

        // cleaning up...restore the original context state
        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);
    }


    // listen for keyup events on the textbox
    // change the amount of fill in the cylinder accordingly
    $('#filler').keyup(function(){
        var value=parseInt($(this).val());
        if(value<0){value=0;}
        if(value>100){value=100;}
        fillY=bottomFillY-(bottomFillY-topFillY)*value/100;
        draw();
    });


  });   // end $(function(){});

  </script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas><br>
    Percent full (0-100)<input type=text id=filler value=0>
</body>
</html>

Answer 2

我有解决方案来顺利填充气缸。在动画功能中，我添加了以下代码。

    if (fillY > (bottomFillY - (bottomFillY - topFillY) * value / 100)){ //112.5
    requestAnimationFrame(animateFill);
    //fillY = bottomFillY - (bottomFillY - topFillY) * value / 100;
    fillY -= 0.50;
}
else{
    requestAnimationFrame(animateFill);
    //fillY = bottomFillY - (bottomFillY - topFillY) * value / 100;
    fillY += 0.50;
}
draw();

工作正常。

由于诗

画布中的动态填充颜色

2 个答案: