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






저작자표시