"requestAnimationFrame"메서드가 작동하지 않습니다.

"requestAnimationFrame"메서드가 다음 예제에서 작동하지 않습니다. 콘솔에 오류 메시지가 표시되지 않습니다. 그렇다면이 코드의 오류는 무엇입니까? HTML :"requestAnimationFrame"메서드가 작동하지 않습니다.

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

자바 스크립트 :

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

출처

2014-01-15 sraban

- "의 drawImage"방법은 "잘 작동하지만 requestAnmationFrame "메소드가 작동하지 않습니다. – sraban

코드에서 수행해야 할 작업은 무엇입니까? ['requestAnimationFrame'] (https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame)은 하나의 매개 변수만을 지원합니다. 그리고 내가 볼 수있는 한 이미지 요소는 문서에 삽입되지 않습니다. 따라서 CSS를 추가하면 아무 효과가 없습니다. –

@ RobW- 나는 ur point를 얻었습니다. 문서에서 위에서 아래로 img를 옮기고 싶습니다. 코드를 조금 편집하지만 여전히 작동하지 않습니다. 코드를 살펴보십시오. 그것의 오류는 무엇입니까? – sraban

콜백으로 전달됩니다. 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

출처

2014-01-15 17:27:58

당신은 내가 설명하는 주석 작업을 얻었는지 여기있는 fly() 내에서 draw()를 호출해야합니다. 이미지가 없으므로 이미지의 src을 자신의 프로젝트에있는 내용으로 변경해야합니다.

Edit:

추가

이미지 이미지 크기에 따라 이미지가 캔버스의 가장자리에 돌아 제작을 그릴 수있는 방법. 그리고 여기에 행동을 보여줄 수있는 바이올린입니다 :

Canvas Animation

자바 스크립트는

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

당신은 아마 timestamp를 사용하여 애니메이션을 확장 할

출처

2014-01-15 16:53:45 zero298

"requestAnimationFrame"메서드가 작동하지 않습니다.

답변

관련 문제