Canvas
1. 기본 구성
ㄱ. <canvas id="canvas" width="300" height="300"></canvas>
ㄴ. 모든 브라우저가 canvas를 지원하는 것이 아니기 때문에 (IE빼고 다 되는거 같음)
=> 대비책으로 아래와 같은 방법으로 사용하면 됨. (태그 사이에 텍스트 또는 이미지 등을 넣어 표현)
<canvas id="canvas" width="300" height="300">Canvas is not support.</canvas>
2. 렌더링 하기
=> 현재는 2D를 기반으로 하고 있지만.. 차후에는 OPEN GL기반의 3D를 제공할 거라 함.
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
3.지원 여부 확인하기
var canvas = document.getElementById('tutorial');
if(canvas.getContext){
//CANVAS 지원
var ctx = canvas.getContext('2d');
...
}else{
//CANVAS 미지원
...
}
4. 참조 기본 예제(사각형 2개 겹쳐 그리기)
=> Alpha값이 적용되기 때문에 겹쳐 지는 곳은 색상이 혼합되어 나온다.
1. <html>
2. <head>
3. <script type="application/javascript">
4. function draw() {
5. var canvas = document.getElementById("canvas");
6. if (canvas.getContext) {
7. var ctx = canvas.getContext("2d");
8.
9. ctx.fillStyle = "rgb(200,0,0)";
10. ctx.fillRect (10, 10, 55, 50);
11.
12. ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
13. ctx.fillRect (30, 30, 55, 50);
14. }
15. }
16. </script>
17. </head>
18. <body onload="draw();">
19. <canvas id="canvas" width="150" height="150"></canvas>
20. </body>
21. </html>
'etc > old' 카테고리의 다른 글
| [Flex] flex3 comboBox bug 콤보박스 버그 (0) | 2010.06.24 |
|---|---|
| [ FLEX ] 줄바꿈 문자 => (0) | 2010.06.16 |
| [JDBC] mac mysql eclipse 연결 부터 테스트 까지... -_-/ (0) | 2010.06.14 |
| [ ANI ] 아라카와 언더 더 브릿지 OP - 비너스와 지저스 (0) | 2010.05.30 |
| [FLEX] List 배경 색상 번갈아 바꿔주는 거 (0) | 2010.05.28 |