"requestAnimationFrame" method is not working in the following example. Console doesn't show any error messsage. Then what is the error in this code? 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()
}
;
"requestAnimationFrame" method is not working in the following example. Console doesn't show any error messsage. Then what is the error in this code? 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()
}
;
- @sebcap26 - "drawImage" method works fine but "requestAnmationFrame" method isn't working. – sraban Commented Jan 15, 2014 at 14:47
-
What is your code supposed to do?
requestAnimationFrameonly supports one parameter. And as far as I can see, the image element is never inserted in the document, so adding CSS to it will obviously have no effect.. – Rob W Commented Jan 15, 2014 at 15:00 - @RobW- I got ur point. I want to moving the img from top to bottom in the document. I edit the code little bit but still it is n't working. Have a look at the code. what is the error in it? – sraban Commented Jan 15, 2014 at 16:09
- I can't read your mind. What does not working mean? What do you expect it to do? What does it do instead? – Wayne Commented Jan 15, 2014 at 16:35
-
And what browser do you use? It is already contained in the answer below,
requestAnimationFramerequires a prefix. – MarijnS95 Commented Jan 15, 2014 at 17:24
2 Answers
Reset to default 3You probably want to scale the animation using the timestamp that's passed to the callback given to requestAnimationFrame. Use something like this:
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);
You can modify ascent and limit to increase/decrease the animation's speed and final position to taste.
As others have mentioned, be sure to use the correct requestAnimationFrame:
window.requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
More information:
- https://developer.mozilla/en-US/docs/Web/API/window.requestAnimationFrame
You need to call your draw() from within the fly() here is how I got it working with ments to explain. You'll need to change your image's src to what it is in your own project since I didn't have your image.
Edit:
Added a way to draw image based on image size and made image turn around at edges of canvas. And here is a fiddle to show it in action:
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>