Zielony Smok

HTML5 canvas – tutorial

setTimeout()

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

function drawRectangle(rectangle, context) {
			context.beginPath();
			context.rect(rectangle.x, rectangle.y, rectangle.width,
					rectangle.height);
			context.fillStyle = 'red';
			context.fill();
			context.lineWidth = rectangle.borderWidth;
			context.strokeStyle = 'black';
			context.stroke();
		};
		function animate(rectangle, canvas, context, startTime) {
			var time = (new Date()).getTime() - startTime;
			var linearSpeed = 100;
			var newX = linearSpeed * time / 1000;
			if (newX < canvas.width - rectangle.width
					- rectangle.borderWidth / 2) {
				rectangle.x = newX;
			}
      		context.clearRect(0, 0, canvas.width, canvas.height);
			drawRectangle(rectangle, context);
			setTimeout(function() {
				animate(rectangle, cv, ctx, startTime);
			}, 24);
		};
		var cv = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var rectangle = {
			x : 0,
			y : 75,
			width : 100,
			height : 50,
			borderWidth : 2
		};
		drawRectangle(rectangle, ctx);
		setTimeout(function() {
			var startTime = (new Date()).getTime();
			animate(rectangle, cv, ctx, startTime);
		}, 24);