使用JavaScript / jQuery从底部到顶部对Canvas Fill（）进行动画处理

Question

您能否看一下这个演示，并让我知道如何使用JavaScript / jQuery从底部到顶部将动画添加到Canvas Fill() ？

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.rect(20, 20, 150, 100); ctx.fillStyle = "red"; setInterval(function(){ctx.fill() }, 3000); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> 

Answer 1

我不知道没有算法的正确方法。

我做了这个算法，可以满足您的需求，希望对您有所帮助。

在google 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>