个人中心
gpt4 book ai didi

jquery - Canvas 中的动态填充颜色

转载 作者：太空宇宙 更新时间：2023-11-04 03:41:55 24 4
gpt4 key购买 nike

我正在使用动画动态地处理 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/

提前致谢摩诃

最佳答案

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

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

enter image description here 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>

关于jquery - Canvas 中的动态填充颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24767160/

24 4 0
文章推荐： python - 在 Python 中查找两个字符串之间的公共(public)字母
文章推荐： python - Py2neo 密码查询结果为 _assert_unfinished。有人可以告诉我为什么吗？
文章推荐： python - ArcPy、Python - 在多次出现连字符时拆分字符串
文章推荐： python - 在 Celery 中记录任务关系
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com