Question

我有一些代码可以逐个绘制动画。但是在动画开始之前，第一行是可见的。请在下面的代码中告诉我要更改的内容。

我没有详细说明我想要做什么，稍后我会补充一些。

＆＃13;

$(document).ready(function() {

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  function Character1(canvas, progress, duration, delay) {
    console.log("c1 " + progress);

    delay = delay || 1;

    var ctx = canvas.getContext('2d');

    debugger;

    if (progress < duration) {

      canvas.strokeStyle = "black";
      ctx.beginPath();
      ctx.moveTo(1, 13);
      ctx.lineTo(1 * ((progress + 1) / duration), 30);
      ctx.stroke();
      ctx.closePath()

      setTimeout(function() {
        Character1(canvas, progress + 1, duration, delay);
      }, delay);

    } else {
      debugger;
      $(document.body).trigger("Character1Completed");
    }
  }



  // Start Drawing
  Character1(canvas, 0, 30, 33);

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="300" height="150">
    Your browser does not support the HTML5 canvas tag.</canvas>

</body>

</html>

＆＃13;

Javascript：通过给出点来绘制动画线

0 个答案: