使用JavaScript/jQuery从下到上设置画布填充（）的动画

请看一下这个演示，让我知道如何使用JavaScript/jQuery将动画从下到上添加到画布

Fill（）

var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
ctx.beginPath（）；
ctx.rect（20,20,150,100）；
ctx.fillStyle=“红色”；
setInterval（函数（）{ctx.fill（）}，3000）

您的浏览器不支持HTML5画布标记。
如果没有算法，我不知道正确的方法

我做了这个算法，它符合你的要求，我希望它能帮助你

在谷歌chrome上测试，你可以使用thick和timeout参数

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

//Configuration
var myRect = {"x":20,"y":20,"w":150,"h":100}  //rect definition
timeInterval= 250;          //time between 2 draw
thick = 3;             //thickness of a line (pixel)
ctx.fillStyle = "red";  //color of the rect

var cpt = 0;

//loop will process fast but we make a delay on each draw with setTimeout which grow at each iteration
for(var ind = thick; ind < myRect.h+thick ; ind += thick){
  setTimeout(function(ind){
      drawLittleRect(ind)
  }, timeInterval*cpt, ind);
  cpt++
}

function drawLittleRect(ind){
  var tempY = myRect.y + myRect.h - ind;

  //Limit top of rect in order to get desired size
  if(tempY < myRect.y){
    tempY = myRect.y
  }
  ctx.fillRect(myRect.x, tempY,  myRect.w, thick);
}
</script>


您的浏览器不支持HTML5画布标记。
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
//配置
var myRect={“x”：20，“y”：20，“w”：150，“h”：100}//rect定义
时间间隔=250//两次平局之间的时间
厚度=3//线的厚度（像素）
ctx.fillStyle=“红色”//直肠的颜色
var-cpt=0；
//循环将处理得很快，但我们在每次绘制时都会使用setTimeout进行延迟，这在每次迭代时都会增加
对于（var ind=thick；ind
好吧，模拟古代缓慢的计算机显然不是HTML画布规范设计者的意图。您很可能需要实现自己的填充算法。如果运气好的话，它的表现会很差，无法达到预期的效果除此之外，如果您只需要一个从下到上高度不断增长的矩形，请尝试使用不带canvas的div元素和一些CSS转换。