Question

“requestAnimationFrame”方法在以下示例中不起作用。控制台不显示任何错误消息。那么这段代码中的错误是什么？ HTML：

   <body>
      <div id="container">
         <canvas id="canvas" width="1024" height="1024"></canvas>
      </div> 
      <script type="text/javascript" src = "Jquery/easy.js"></script>
   </body>

的javascript：

 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 var chop1 = new Image();
 chop1.src = "img/chopper.png";
 var chopperX = 0;
 var chopperY = 0;
 var ascent = 20;

 function fly()
 {
    chopperY += ascent;
    ctx.drawImage(chop1, chopperX, chopperY, 30, 80);
    requestAnimationFrame(fly);

 }

 window.onload = function() {
    init()
 };

 function init()
 {
    chop1.src = "img/chopper.png";
    ctx.drawImage(chop1, 0, 0, 30, 80);
    fly()
 }
 ;

Answer 1

您需要在draw()内拨打fly()，这是我如何使用评论来解释的。您需要将您的图片的src更改为您自己项目中的内容，因为我没有您的图片。

<强> Edit:

添加了一种基于图像大小绘制图像的方法，并使图像在画布边缘转动。这里有一个小提琴来展示它的实际效果：

Canvas Animation

<强>的JavaScript

/**
 * Namespace to set up your animation
 * @namespace
 */
var anim = (function() {
   var exports = {};

   // Make sure we use the right "requestAnimationFrame"
   // For the right browser
   window.requestAnimationFrame =
           window.requestAnimationFrame ||
           window.mozRequestAnimationFrame ||
           window.webkitRequestAnimationFrame ||
           window.msRequestAnimationFrame;

   // Keep some variables for the namespace
   var canvas = null, // The Canvas element to draw to
           ctx = null, // The context of the canvas
           chop1 = null, // The image that will get drawn
           chopperX = 0, // The X position of the image
           chopperY = 0, // The Y position of the image
           ascent = 20;    // How much to increment height by per anim

   /**
    * The function to get called by, and to perpetuate
    * the requestAnimationFrame() function
    * @returns {undefined}
    */
   function fly() {
      // Increment the height of the image
      chopperY += ascent;
      // Switch directions at bottom of canvas
      if (chopperY > 1000) {
         ascent = -ascent;
      }
      if (chopperY < 0) {
         ascent = -ascent;
      }
      // Clear the canvas so the animation looks good
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      // Draw the image to the canvas
      ctx.drawImage(chop1, chopperX, chopperY, chop1.width, chop1.height);
      // Get ready to draw again on the next animation frame
      requestAnimationFrame(fly);
   }

   /**
    * Function to start the animation process
    * @param {Canvas DOM Element} canvasElement The canvas to draw on
    * @returns {undefined}
    */
   exports.go = function(canvasElement) {
      // Set the canvas we draw to
      canvas = canvasElement;
      // Get a context to draw to
      ctx = canvas.getContext("2d");
      // Create the image we want to draw
      chop1 = new Image();
      // Set the image's source
      chop1.src = "../../img/dice.png";
      // Start the animation process
      window.requestAnimationFrame(fly);
   };

   // Let our functions get called from our namespace
   return exports;
}());

/**
 * Function that gives the canvas element to the namespace to animate
 * @returns {undefined}
 */
function init() {
   anim.go(document.getElementById("canvas"));
}

/**
 * Function to start the initialization on a window load
 * @returns {undefined}
 */
window.onload = init;
//init();

<强> HTML

   <body>
      <div id="container">
         <canvas id="canvas" width="1024" height="1024"></canvas>
      </div> 
   </body>

Answer 2

您可能希望使用传递给timestamp的回调的requestAnimationFrame来缩放动画。使用这样的东西：

var ascent = 20;
var limit = 5000;
var start = null;

function fly(timestamp) {
    if (start === null) {
        start = timestamp;
    }
    var progress = timestamp - start;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(chop1, 0, Math.min(progress / ascent, canvas.height), 
                  chop1.width, chop1.height);
    if (progress < limit) {
        requestAnimationFrame(fly);
    }
}

requestAnimationFrame(fly);

您可以修改ascent和limit来增加/减少动画的速度和最终位置。

正如其他人所提到的，请务必使用正确的requestAnimationFrame：

window.requestAnimationFrame = window.requestAnimationFrame ||
                               window.mozRequestAnimationFrame ||
                               window.webkitRequestAnimationFrame ||             
                               window.msRequestAnimationFrame;

更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

“requestAnimationFrame”方法不起作用

2 个答案: