canvasHelp/index.html at master · ORIGINALUSRNM/canvasHelp · 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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html>
<head>
	 <script src="js/libs/jquery-1.9.1.min.js"></script>
	 <script src="canvasHelp.js"></script>
	 <style type="text/css">
	 	body {
	 		background-color:#000;
	 	}
	 	#app {
	 		margin:50px auto;
	 		width:600px;
	 	}
	 	canvas {
	 		border:1px solid #05ea45;
	 	}
	 	img {
	 		width:100px;
	 	}
	 	.canvas-coords {
	 		color:#05ea45;
	 	}
	 </style>
</head>
<body>
	<section>
		<button id="snapshot">Take Snapshot!</button>
		<!-- <button id="animate">animate</button> -->
	</section>
	<section id="app">
		<canvas id="jasonCanvas" width="600" height="300"></canvas>
	<div class="canvas-coords"></div>
	</section>
	<section id="snapGallery">
	</section>

<script type="text/javascript">
//task: create a utility class that allows you to create a destination and trajectory to animate a
//canvas object. Point a to point b, at certain speed, with certain easing, and with certain path.
$(function(){
	var RUNNING = false;
	var ctx = $can.getContext('jasonCanvas');
	var canvas = ctx.canvas;
	window.ctx = ctx;
	var BG_COLOR = "orange";
	var circles = [];

	$('#jasonCanvas').on('mousemove', function(e){
		var canvasPoint = $can.windowToCanvas(ctx.canvas, e.pageX, e.pageY);
		$('.canvas-coords').html( canvasPoint.x + ", " + canvasPoint.y);
	});

	$('#jasonCanvas').on('click', function(e){
		var canvasPoint = $can.windowToCanvas(ctx.canvas, e.pageX, e.pageY);
		$can.isPointInPath('jasonCanvas', canvasPoint, function(path){
			path.strokeStyle = "#ffffff";
			path.fillStyle = "green";
			path.lineWidth = 10;
		});
	});

	var takeSnap = function(){
		var dataUrl = ctx.canvas.toDataURL();
		var snap = $('<img>');
		$(snap).prop("src", dataUrl);
		$('#snapGallery').append(snap);
	};

	var drawCircles = function(){
		for(var i = 0; i < circles.length; i++){
			var c = circles[i];
			c.draw(ctx);
		}
	};

	var updateCircles = function(){
		for(var i = 0; i < circles.length; i++){
			var c = circles[i];
			if(c.trajectory){
				c.updateTrajectory();
			}
		}

	};

	circles.push(new $can.Circle(20, 20, 10, "#456789"));
	circles.push(new $can.Circle(120, 20, 50, "#ccc789"));
	circles.push(new $can.Circle(70, 20, 90, "#006789"));
	circles.push(new $can.Circle(210, 10, 10, "#cc6789"));
	circles.push(new $can.Circle(420, 40, 70, "#ccc11a"));
	circles.push(new $can.Circle(50, 30, 190, "#444789"));
	circles.push(new $can.Circle(110, 30, 10, "#cc6111"));
	circles.push(new $can.Circle(220, 42, 70, "#cccacc"));
	circles.push(new $can.Circle(70, 34, 19, "#444000"));

	var x = 0;
	var y = 0;
	var c;
	var t;

	for(var i = 0; i < circles.length; i++){
		c = circles[i];
		x = Math.floor(Math.random() * 600);
		y = Math.floor(Math.random() * 300);
		t = new $can.Trajectory( c, x, y);
		c.addTrajectory(t);
		c.addToCanvas('jasonCanvas');
		window.c = c;
	}

	$can.animate('jasonCanvas');
	$can.start('jasonCanvas');

	$('#snapshot').on('click', function(){
		takeSnap();
	});

});

</script>
</body>
</html>