Menjalankan animasi png sequence dengan html5
Png sequence adalah urutan file png dengan index, yang sudah dipersiapkan sebelumnya.
Ini dia programnya :
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="480" height="800"></canvas>
<script>
window.requestAnimFrame = (function(callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
var iframe = 1;
var maxframe = 10;
var ArrImage = new Array();
for(var i=1;i<=10;i++){
if(i<10) ArrImage[i] = 'images/images000'+i+'.png';
else if(i<100) ArrImage[i] = 'images/images00'+i+'.png';
}
var imageObj = new Image();
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
function animate() {
// update
// clear
//context.clearRect(0, 0, canvas.width, canvas.height);
// draw stuff
imageObj.onload = function() {
context.drawImage(imageObj, 0, 0);
};
imageObj.src = ArrImage[Math.floor(iframe)];
if(iframe<maxframe) iframe+=0.1;
else iframe=maxframe;
// request new frame
requestAnimFrame(function() {
animate();
});
}
animate();
</script>
</body>
</html>
mohon koreksi jika ada kekeliruan di program saya
maklum, masih belajar :)
semoga bermanfaat
sumber:
http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/