clock/mask_test_multiple.html at master · atomoil/clock · 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Masking in Paper.js</title>
	<link rel="stylesheet" href="style.css">
	<script type="text/javascript" src="lib-0.22/paper.js"></script>
	<script type="text/paperscript" canvas="canvas">

		var yp = 100;
		var circle = new Path.Circle(new Point(100,yp), 50);
		circle.fillColor = '#444444';
		var circle2 = new Path.Circle(new Point(130,yp), 49);
		circle2.strokeColor = '#111111';
		var style = {
			font: "American Typewriter, Courier, typewriter",
			justification: 'center',
			fillColor: '#111111',
			fontSize: 50
		};
		var text1 = new PointText(new Point(100,yp));
		text1.characterStyle = style;
		text1.content = "1";
		var text2 = new PointText(new Point(200,yp));
		text2.characterStyle = style;
		text2.content = "2";
		var text3 = new PointText(new Point(300,yp));
		text3.characterStyle = style;
		text3.content = "3";

		var agroup = new Group(circle,circle2,text1,text2,text3);


		agroup.clipped = true;

		yp = 150;

		var second_circle = new Path.Circle(new Point(100,yp), 50);
		second_circle.fillColor = '#444444';
		var second_circle2 = new Path.Circle(new Point(130,yp), 49);
		second_circle2.strokeColor = '#00ff00';
		var second_style = {
			font: "Verdana",
			justification: 'center',
			fillColor: '#00ff00',
			fontSize: 60
		};
		var second_text1 = new PointText(new Point(100,yp));
		second_text1.characterStyle = second_style;
		second_text1.content = "1";
		var second_text2 = new PointText(new Point(200,yp));
		second_text2.characterStyle = second_style;
		second_text2.content = "2";
		var second_text3 = new PointText(new Point(300,yp));
		second_text3.characterStyle = second_style;
		second_text3.content = "3";

		var second_agroup = new Group(second_circle,second_circle2,second_text1,second_text2,second_text3);

		second_agroup.clipped = true;

		inc = 0.6;

		function onFrame(event) {

			var xp = circle.position.x;
			xp += inc;
			if (xp > 300) inc = -Math.abs(inc);
			if (xp < 100) inc = Math.abs(inc);
			circle.position.x = xp;
			circle2.position = circle.position;

			second_circle.position.x = xp;
			second_circle2.position = second_circle.position;

		}

	</script>
</head>
<body>
	<canvas id="canvas" resize></canvas>
</body>
</html>