EaselJS/examples/Graphics_winding.html at master · CreateJS/EaselJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>EaselJS Example: Graphics Winding</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">
	function init() {
		var stage = new createjs.Stage("testCanvas");

		var shape = new createjs.Shape();
		stage.addChild(shape);
		shape.graphics.beginFill("#000");
		shape.x = 0;

		// Draw the initial shape
		shape.graphics.drawRect(20, 20, 450, 360);

		// Additional draw calls are made to the same shape, but using reverse winding.
		// Change the winding to vary the results.
		shape.graphics.arc(160, 160, 110, 0, Math.PI * 2, true).closePath(); // Subtracts from the square
		shape.graphics.arc(330, 240, 110, 0, Math.PI * 2, true).closePath(); // Subtracts from the square, but ADDs to the first circle

		// Use the same graphics to make another Shape
		var mask = new createjs.Shape(shape.graphics);
		// Create a bitmap, and mask it using the compound shape
		var bmp = new createjs.Bitmap("../_assets/art/flowers.jpg");
		bmp.mask = mask;
		stage.addChild(bmp);

		// Move them over so we can see them
		bmp.x = 470;
		mask.x = 470;

		createjs.Ticker.addEventListener("tick", stage);
	}
</script>
</head>

<body onload="init();">
<header class="EaselJS">
	<h1>Graphics Winding</h1>

	<p>Demonstrates how to draw compound shapes using winding to create "holes"
		in the shape. This approach is also
		useful for masks.</p>
</header>

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

</html>