Ruch obrazka w poziomie (HTML5 canvas)

Ruch obrazka w poziomie

Kliknij przycisk ‘Start’ aby rozpocząć animację

Listing

    var imgObj = null;
	var animate;
	function init() {
		imgObj = document.getElementById('myImage');
		imgObj.style.position = 'relative';
		imgObj.style.left = '0px';
	};
	function moveRight() {
		imgObj.style.left = parseInt(imgObj.style.left) + 2 + 'px';
		animate = setTimeout(moveRight, 20);
	};
	function stop(){
		clearTimeout(animate);
	};
	function powrot(){
		imgObj = document.getElementById('myImage');
		imgObj.style.left = '0px';
	};
	window.onload = init;
        

<form>
		<img id="myImage" src="images/samsmok.png" />
		<p>Kliknij przycisk 'Start' aby rozpocząć animację</p>
		<input type="button" value="Start" onclick="moveRight();" />
		<input type="button" value="Stop" onclick="stop();" />
		<input type="button" value="Reset" onclick="powrot();" />
	</form>