examples/Transform_simple.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS: Simple Transform Example</title>

	<link href="../_assets/css/shared.css" rel="stylesheet" type="text/css"/>
	<link href="../_assets/css/examples.css" rel="stylesheet" type="text/css"/>
	<script src="../_assets/js/examples.js"></script>

	<script src="../lib/easeljs-NEXT.js"></script>
	<!-- We also provide hosted minified versions of all CreateJS libraries.
	  http://code.createjs.com -->

<script id="editable">
	var img;
	var stage;
	var angle;

	function init() {
		angle = 0;
		img = new Image();
		img.onload = handleImageLoad;
		img.src = "../_assets/art/robot.png";
	}

	function stop() {
		createjs.Ticker.removeEventListener("tick", tick);
	}

	function handleImageLoad() {
		var canvas = document.getElementById("testCanvas");
		stage = new createjs.Stage(canvas);
		stage.autoClear = true;
		bmp = new createjs.Bitmap(img);
		bmp.regX = img.width >> 1;
		bmp.regY = img.height >> 1;
		bmp.x = canvas.width >> 1;
		bmp.y = canvas.height >> 1;
		bmp.scale = 0.1;
		stage.addChild(bmp);
		stage.update();

		createjs.Ticker.timingMode = createjs.Ticker.RAF;
		createjs.Ticker.addEventListener("tick", tick);
	}

	function tick(event) {
		angle += 0.01;
		var value = Math.sin(angle) * 360;

		bmp.rotation = value;
		bmp.scale = value / 360;
		stage.update(event);
	}

</script>
</head>

<body onload="init()">

<header class="EaselJS">
	<h1>Simple Transform Example</h1>

	<p>A simple example of EaselJS transformations, such as
		<code>rotation</code>, <code>scaleX</code>, and <code>scaleY</code>.</p>
</header>

<canvas id="testCanvas" width="960" height="400"></canvas>

</body>
</html>