Question

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

＆＃13;

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);

＆＃13;

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

＆＃13;

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>

Animate Canvas Fill（）从底部到顶部使用JavaScript / jQuery

1 个答案: