시작은 canvas를 이용한 입체 사각형 그리기!
이대로 하면 현재(2010. 11. 08)는 IE 8 에서 안돌아간다 ~_~
크롬에서는 정상 작동함.
"rectangle.js"
element = document.getElementById('idCanvas');
canvas = element.getContext('2d');
var x = 30, y = 30, width = 200, height = 100, alpha = 1;
var r = 224, g = 255, b = 255;
canvas.strokeRect(x, y, width, height);
for(i=0; i<4; i++) {
x += 10, y += 10, width -= 20, height -= 20, alpha -= 0.1;
r -= 30, g -= 30, b -= 30;
canvas.globalAlpha = alpha;
canvas.fillStyle = '#' + r.toString(16) + g.toString(16) + b.toString(16);
canvas.fillRect(x, y, width, height);
}
"rectangle.htm"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Canvas 2D Context</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<canvas id="idCanvas" width=300 height=150></canvas>
<script src="rectangle.js"></script>
</body>
</html>
"circle.js"
var arcFill = function(canvas, x, y, r, g, b, radius) {
canvas.beginPath();
canvas.fillStyle = 'rgba(' + r + ', ' + g + ', ' + b + ', 0.8)';
canvas.arc(x, y, radius, 0, Math.PI*2, false);
canvas.fill();
}
var canvas = document.getElementById('idCanvas').getContext('2d');
arcFill(canvas, 50, 40, 255, 130, 130, 30);
arcFill(canvas, 50, 90, 43, 255, 40, 30);
arcFill(canvas, 100, 40, 64, 161, 255, 30);
arcFill(canvas, 100, 90, 158, 64, 255, 30);
arcFill(canvas, 75, 65, 255, 255, 223, 25);
"circle.htm"
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Circle 2D Context</title>
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
</head>
<body>
<canvas id="idCanvas" width=300 height=150></canvas>
<script src="circle.js"></script>
</body>
</html>
dl : 용어와 설명을 나타내는 정의형 목록
dt : 용어를 나타내는 요소
dd : 설명을 나타내는 요소
'Programming Languages > HTML5' 카테고리의 다른 글
| 유투브 영상을 바로 나오게 태그하기 (0) | 2015.01.30 |
|---|---|
| text/css , style 속성 (0) | 2010.10.25 |
| html로 포토샵 효과 주기 (0) | 2010.10.04 |
| 신기술.. HTML5 (0) | 2010.09.06 |
