First you need to have picture like this...
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Blit</title>
<script>
var context;
var x=0;
var ind;
var offset;
var photos = new Array();
for( var i=1; i<15; i++){
var im = new Image();
im.src = "p"+i+".PNG"; ( edit this if you want "p" is the name of the picture plus its number)
photos.push(im);
}
function init() {
context = document.getElementById('canvas').getContext('2d');
setInterval(loop, 10); ( you can edit the "10" its the speed of the slide)
}
function lopp(){
x +=(slider.value - x) * 0.1;
ind = Math.floor(x/800);
offset = x % 800;
context.drawImage(photos[ind], offset, 0, 800-offset, 600, 0, 0, 800-offset, 600);
context.drawImage(photos[ind+1], 0, 0, 800, 600, 800-offset, 0, 800, 600);
}
</script>
</head>
<body onLoad="init()">
<canvas width="800" height="600" id="canvas"> </canvas>
<br/>
<input type="range" id="slider" style=" width:800px" min="0" max="10400" step="1" value="0">
</body>
</html>
and this
that's it! enjoy..
0 Comments:
Post a Comment