Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Frame by frame animation in HTML5 with canvas
To create a frame by frame animation in HTML5 with canvas, try to run the following code:
var myImageNum = 1;
var lastImage = 5;
var context = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
context.clearRect( 0, 0, context.canvas.width, context.canvas.height );
context.drawImage( img, 0, 0 );
};
var timer = setInterval( function(){
if (myImageNum > lastImage){
clearInterval( timer );
}else{
img.src = "images/left_hnd_"+( myImageNum++ )+".png";
}
}, 1000/15 );
Updated on: 29-Jan-2020
573 Views
Advertisements