최근게시물
canvas
신고
인쇄
스크랩
Canvas
|
<!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset=utf-8 /> | |
| <meta name="viewport" content="width=620" /> | |
| <title>HTML5 Demo: Canvas</title> | |
| <link rel="stylesheet" href="/css/html5demos.css" type="text/css" /> | |
| <script src="/js/h5utils.js"></script></head> | |
| <body> | |
| <section id="wrapper"> | |
| <header> | |
| <h1>Canvas</h1> | |
| </header> | |
| <article></article> | |
| <script> | |
| buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 }); | |
| function buildSpinner(data) { | |
| var canvas = document.createElement('canvas'); | |
| canvas.height = 100; | |
| canvas.width = 300; | |
| document.getElementsByTagName('article')[0].appendChild(canvas); | |
| var ctx = canvas.getContext("2d"), | |
| i = 0, degrees = data.degrees, loops = 0, degreesList = []; | |
| for (i = 0; i < degrees; i++) { | |
| degreesList.push(i); | |
| } | |
| // reset | |
| i = 0; | |
| // so I can kill it later | |
| window.canvasTimer = setInterval(draw, 1000/degrees); | |
| function reset() { | |
| ctx.clearRect(0,0,100,100); // clear canvas | |
| var left = degreesList.slice(0, 1); | |
| var right = degreesList.slice(1, degreesList.length); | |
| degreesList = right.concat(left); | |
| } | |
| function draw() { | |
| var c, s, e; | |
| var d = 0; | |
| if (i == 0) { | |
| reset(); | |
| } | |
| ctx.save(); | |
| d = degreesList[i]; | |
| c = Math.floor(255/degrees*i); | |
| ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')'; | |
| ctx.lineWidth = data.size; | |
| ctx.beginPath(); | |
| s = Math.floor(360/degrees*(d)); | |
| e = Math.floor(360/degrees*(d+1)) - 1; | |
| ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false); | |
| ctx.stroke(); | |
| ctx.restore(); | |
| i++; | |
| if (i >= degrees) { | |
| i = 0; | |
| } | |
| } | |
| } | |
| </script><a id="html5badge" href="http://www.w3.org/html/logo/"> | |
| <img src="http://www.w3.org/html/logo/badge/html5-badge-h-connectivity-device-graphics-multimedia-performance-semantics-storage.png" width="325" height="64" alt="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage"> | |
| </a> | |
| <footer><a href="/">HTML5 demos</a>/<a id="built" href="http://twitter.com/rem">@rem built this</a>/<a href="#view-source">view source</a></footer> | |
| </section> | |
| <a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a> | |
| <script src="/js/prettify.packed.js"></script> | |
| <script> | |
| var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); | |
| document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); | |
| </script> | |
| <script> | |
| try { | |
| var pageTracker = _gat._getTracker("UA-1656750-18"); | |
| pageTracker._trackPageview(); | |
| } catch(err) {}</script> | |
| </body> | |
| </html> |
댓글 0개
| 엮인글 0개
29개(2/2페이지)
| 번호 | 제목 | 글쓴이 | 조회 | 날짜 |
|---|---|---|---|---|
| 9 | [node.js] chat 소스 | 웹이앱을만났을때 | 9907 | 2012.05.25 14:37 |
| 8 | [node.js] 태그 자동변환 | 웹이앱을만났을때 | 9027 | 2012.05.24 20:36 |
| 7 | [cd2m] 간단 소스 | 웹이앱을만났을때 | 6604 | 2012.05.24 16:37 |
| 6 | echo이용하여 리다이렉션 하는 법 | 웹이앱을만났을때 | 4571 | 2012.05.23 14:17 |
| 5 | 웹뷰에서 유투브 플러그인 | 웹이앱을만났을때 | 4094 | 2011.10.10 15:05 |
| 4 | 사진업로드(php) | 웹이앱을만났을때 | 5321 | 2011.09.15 22:15 |
| 3 | [iphone] 현재 온라인인지 체크 | 웹이앱을만났을때 | 3391 | 2011.09.15 12:12 |
| >> | canvas | 웹이앱을만났을때 | 3828 | 2011.08.05 20:58 |
| 1 |
jquery
 |
웹이앱을만났을때 | 3755 | 2011.08.01 10:57 |
