jcanvas/index.html at master · stuartloxton/jcanvas · 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
<html>
	<head>
		<title>jCanvas Examples</title>
		<script src="scripts/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script src="scripts/jquery.canvas.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
			$(function() {

				/*====================================================
				Using jCanvas
				====================================================*/
				$('#jcanvas').initAsCanvas().fillStyle('#F0F')
					.drawShape(
						[10,10],
						[100, 30],
						[10, 60]
					)
					.fillText('Example text', 10, 90)
					.rotation('-=0.1')
					.fillRect(10, 120, 90, 50)
					.rotation(0)
					.clearRect(20, 130, 70, 30);


				/*====================================================================
				Not using jCanvas
				====================================================================*/
				var ctx = document.getElementById('norm').getContext('2d');
				ctx.fillStyle = '#00A0A0';
				ctx.moveTo(10, 10);
				ctx.lineTo(100, 30);
				ctx.lineTo(10, 60);
				ctx.fill();
				if(ctx.fillText) {
					ctx.fillText('Example text', 10, 90); // Valid text code for FF3.1+
				} else if(ctx.mozDrawText) {
					ctx.translate(10, 90);
					ctx.mozDrawText('Example text'); // for FF3-
					ctx.translate(-10, -90);
				}
				ctx.rotate(-0.1);
				ctx.fillRect(10, 120, 90, 50);
				ctx.rotate(0.1)
				ctx.clearRect(20, 130, 70, 30);


			});
		</script>
		<style type="text/css" media="screen">
			#jcanvas {
				height: 300px;
				width: 300px;
			}
		</style>
	</head>
	<body>
		<div id="jcanvas">
			<p>This is fallback content that works cross browser and platform with no hacks.</p>
		</div>
		<canvas id="norm" height="300" width="300">
	</body>
</html>