canvas

웹이앱을만났을때 | 2011.08.05 20:58 | 조회 3827

Canvas

HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage  Fork me on GitHub

 

 

 

<!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 &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; Storage" title="HTML5 Powered with Connectivity / Realtime, Device Access, Graphics, 3D &amp; Effects, Multimedia, Performance &amp; Integration, Semantics, and Offline &amp; 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>

facebook twitter
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