1. <!DOCTYPE html>
2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5. <title>HTML5 Demo: canvas</title>
6. <style>
7. body {
8. font: normal 16px/20px Helvetica, sans-serif;
9. background: rgb(237, 237, 236);
10. margin: 0;
11. margin-top: 40px;
12. padding: 0;
13. }
14.
15. article, section, header, footer {
16. display: block;
17. }
18.
19. #wrapper {
20. width: 600px;
21. margin: 0 auto;
22. background: #fff url(images/shade.jpg) repeat-x center bottom;
23. -moz-border-radius: 10px;
24. -webkit-border-radius: 10px;
25. border-top: 1px solid #fff;
26. padding-bottom: 76px;
27. }
28.
29. h1 {
30. padding-top: 10px;
31. }
32.
33. h2 {
34. font-size: 100%;
35. font-style: italic;
36. }
37.
38. header,
39. article > *,
40. footer a,
41. footer p {
42. margin: 20px;
43. }
44.
45. footer > * {
46. margin: 20px;
47. color: #999;
48. }
49.
50. article {
51. position: relative;
52. }
53. </style>
54. <script>
55. // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
56. (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
57. </script>
58. </head>
59. <body>
60. <section id="wrapper">
61. <header>
62. <h1>Canvas</h1>
63.
64. </header>
65. <article></article>
66. <footer><a href="/">HTML5 demo</a></footer>
67. </section>
68. <script src="h5utils.js"></script>
69. <script>
70.
71. buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
72.
73. function buildSpinner(data) {
74.
75. var canvas = document.createElement('canvas');
76. canvas.height = 100;
77. canvas.width = 300;
78. document.getElementsByTagName('article')[0].appendChild(canvas);
79. var ctx = canvas.getContext("2d"),
80. i = 0, degrees = data.degrees, loops = 0, degreesList = [];
81.
82. for (i = 0; i < degrees; i++) {
83. degreesList.push(i);
84. }
85.
86. // reset
87. i = 0;
88.
89. // so I can kill it later
90. window.canvasTimer = setInterval(draw, 1000/degrees);
91.
92. function reset() {
93. ctx.clearRect(0,0,100,100); // clear canvas
94.
95. var left = degreesList.slice(0, 1);
96. var right = degreesList.slice(1, degreesList.length);
97. degreesList = right.concat(left);
98. }
99.
100. function draw() {
101. var c, s, e;
102.
103. var d = 0;
104.
105. if (i == 0) {
106. reset();
107. }
108.
109. ctx.save();
110.
111. d = degreesList[i];
112. c = Math.floor(255/degrees*i);
113. ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
114. ctx.lineWidth = data.size;
115. ctx.beginPath();
116. s = Math.floor(360/degrees*(d));
117. e = Math.floor(360/degrees*(d+1)) - 1;
118.
119. ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
120. ctx.stroke();
121.
122. ctx.restore();
123.
124. i++;
125. if (i >= degrees) {
126. i = 0;
127. }
128. }
129. }
130.
131.
132. </script>
133. <script>
134. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
135. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
136. </script>
137. <script>
138. try {
139. var pageTracker = _gat._getTracker("UA-1656750-18");
140. pageTracker._trackPageview();
141. } catch(err) {}</script>
142. </body>
143.
144. </html>