티스토리 뷰

DEV/HTML5

HTML5 canvas 태그 사용 기본 구조

초록매실원액 2015. 11. 27. 09:41

[HTML5 canvas 태그 사용 기본 구조]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="ko">
<head>
 <title>HTML5 canvas 태그 사용 기본 구조</title>
 <meta charset="utf-8" />
 <style type="text/css">
     canvas{
         width:400px; height:400px; border:1px solid blue;
            border-radius:10px;
        }    
  </style>
    <script type="text/javascript">
     // 페이지 로드 이벤트 잡기
        window.addEventListener("load",function(){
         //alert("페이지 로드됨");
   
   //canvas 개체를 가져와서,
   var canvas = document.querySelector("canvas");
   //현재 브라우저가 canvas 요소를 지원하는지 예외 처리
   if(!canvas || !canvas.getContext){
     return; //alert('canvase요소를 지원하지 않습니다.');
   }
   //canvas의 getContext 함수를 통햇 Context 개체 생성
   var ctx = canvas.getContext('2d');
   if(!ctx){
    return; //alert('2d 컨텍스트 개체를 지원하지 않습니다.');
   }
   //ctx를 통해서 원하는 도형 그리기
   //사각형 그리기
   //그라디언트 효과를 부여한 사각형 그리기
   var gradient = ctx.createLinearGradient(50,25,200,100);
   gradient.addColorStop(0,'red');
   gradient.addColorStop(0.5,'green');
   gradient.addColorStop(1,'blue');
   ctx.fillStyle = gradient; // 배경을 그라데이션 효과 적용
   ctx.fillRect(50,25,200,100);// 사각형 그리기
        },false);        
  </script>
</head>
<body>
 <canvas width="400" height="400">
     당신의 브라우저는 canvas요소를 지원하지 않습니다.
    </canvas>
</body>
</html>
cs



[HTML5 canvas - jQuery load event]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 <!DOCTYPE html>
<html lang="ko">
<head>
 <title>HTML5 canvas -fillRect() 함수로 사각형 그리기</title>
 <meta charset="utf-8" />
 <style type="text/css">
    #myCanvas { border:1px solid red;}
  </style>
    <script src="./Scripts/jquery-1.5.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
    //jQuery 페이지 로드 이벤트 잡기
 $(document).ready(function(){
  // canvas 요소에 대한 Context 개체 가져오기
  // var canvas = documnet.getElementById('myCanvas');
  // var ctx = canvas.getElementById('myCanvas').getContext('2d');
  var ctx = document.getElementById('myCanvas').getContext('2d');
  
  //사각형 그리기
  ctx.fillStyle="red";//"rgb(255,0,0)";
  ctx.fillRect(50,50,100,100);
 });        
  </script>
</head>
<body>
 <canvas id="myCanvas" width="420" height="380">
     당신의 브라우저는 canvas요소를 지원하지 않습니다.
    </canvas>
</body>
</html>
cs






저작자표시

'DEV > HTML5' 카테고리의 다른 글

Video와 Audio 태그 사용 예제  (0) 2015.11.30
Canvas 에 패스 그리기  (0) 2015.11.30
HTML5 기본 템플릿  (0) 2015.11.26
공유하기 링크
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함