Question

我一直在关注各种指南并将基本代码用于简单的动画，但对于我的生活，我无法正确重置画布。 clearRect（）函数工作正常，但是当我尝试再次立即绘制弧时，它再次绘制所有路径的总和而不是仅绘制圆的单个段。

有人能告诉我这里我做错了什么，我知道这是一个简单的解决方案！简而言之，我希望下面的测试页面能够产生一种旋转段，而不仅仅是画一个圆圈：

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

</head>
<body>
<span id="degrees_output" style="display:block;width:60px"></span>
<button onclick="continue_animation=false;">Stop</button>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var degrees = 0;
  var continue_animation = true;
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var output = document.getElementById('degrees_output');      

  window.requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

  function animate() {        
    // update
    output.innerHTML = degrees;

    var radians = (degrees / 180) * Math.PI;

    if (degrees >= 360)
        degrees = 0;
    else
        degrees += 1;

    // clear
    if (degrees % 20 == 0)
    {           
        context.clearRect(0, 0, 578, 200);

    }

    context.beginPath();

    // setup the line style     
    context.strokeStyle = '#fa00ff';
    context.lineWidth = 5;
    context.lineCap = 'round';


    context.arc(50, 50, 20, 0, radians, false);

    // colour the path
    context.stroke();

    context.closePath();                


    // request new frame
    requestAnimFrame(function() {
        if (continue_animation)
            animate();
    });
  }
  animate();

</script>

Answer 1

如果你想要一个固定长度的弧扫过你的圆圈，你需要在你的context.arc中同时指定起始和结束角度：

context.arc(50, 50, 20, startRadians, radians, false);

和startRadians可以是你的“弧度”值后面的任何角度：

var startRadians= (degrees-45) * Math.PI/180;

并且，是的，在将弧绘制到新位置之前，您需要清除画布（至少是前一个弧）：

context.clearRect(0,0,canvas.width,canvas.height);

这是代码和小提琴：http://jsfiddle.net/m1erickson/VFhzX/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var degrees = 0;
    var continue_animation = true;
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var output = document.getElementById('degrees_output');      

    window.requestAnimFrame = (function(callback) {
      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
      function(callback) {
        window.setTimeout(callback, 1000 / 60);
      };
    })();

    function animate() {        
      // update
      output.innerHTML = degrees;

      var radians = (degrees / 180) * Math.PI;
      var startRadians= (degrees-45) * Math.PI/180;

      if (degrees >= 360)
          degrees = 0;
      else
          degrees += 1;

      // clear
      if (degrees % 20 == 0)
      {           
          context.clearRect(0, 0, 578, 200);

      }

      context.clearRect(0,0,canvas.width,canvas.height);

      context.beginPath();

      // setup the line style     
      context.strokeStyle = '#fa00ff';
      context.lineWidth = 5;
      context.lineCap = 'round';


      context.arc(50, 50, 20, startRadians, radians, false);

      // colour the path
      context.stroke();

      context.closePath();                


      // request new frame
      requestAnimFrame(function() {
          if (continue_animation)
              animate();
      });
    }
    animate();



}); // end $(function(){});
</script>

</head>

<body>
    <span id="degrees_output" style="display:block;width:60px"></span>
    <button onclick="continue_animation=false;">Stop</button>
    <canvas id="myCanvas" width="578" height="200"></canvas>
</body>
</html>

HTML 5 2D画布动画清除

1 个答案: