DEVELOPE/HTML-HTML5

html5 canvas api 사용

소찾나 2017. 11. 20. 11:34

html5 canvas api 사용

html5 canvas api 사용



html5의 canvas 요소는 그래픽을 자유롭게 그릴 수 있는 영역을 말한다, 캔버스는 고정된 넓이와 높이를 갖고 있어


그 영역 내라면 원이나 사각형등의 도형이나 선, 이미지 등의2D 또는 3D 그래픽을 자유롭게 그릴 수 있습니다.



1 CASVAS 사용방법


canvas( 캔버스)를 사용하는데 다른 특별한 준비를 필요가 없습니다. 다만 canvas 태그를 html 안에 기술하여 주면 됩니다. 캔버스의


길이와 높이는 고정되어 있으므로 width 와 height 를 지정하고 추후 javascript 로 값을 변경할 수도 있습니다.


canvas 태그 예제


1
<canvas id="canvas_test" width="800" height="500"></canvas>                                  
cs


위 코드를 이용하면 넓이 800 높이 500 픽셀의 투명한 캔버스를 지정할 수 있습니다. 사용법은 아래와 같습니다.


1
2
3
var canvas = document.getElementById("canvas_test");                                           
 
var context = canvas.getContext("2d");                   
cs



그리기 컨텍스트는 그래픽을 그리는데 도움이 되는 여러가지 메서드를 갖고 있습니다 매서드를 호출하면 그리기를 그릴 수 있습니다



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
<!DOCTYPE html>
  <head>
    <title>html5는 쉬워요</title>
 
  </head>
  <body>
        <canvas id="canvas_test" width="800" height="500"></canvas>                            
    <script type="text/javascript">
 
        var canvas = document.getElementById("canvas_test");
        var context = canvas.getContext("2d");
 
        context.fillRect(0, 0, 150, 100);
        context.fillText("hello canvas!", 155, 110);
 
        context.beginPath();
 
        context.moveTo(0, 100);
        context.lineTo(300, 100);
        context.moveTo(150, 0);
        context.lineTo(150, 200);
 
 
 
        context.rect(0, 0, 300, 200);
        context.stroke();
        context.closePath();
 
    </script>
  </body>
</html>
cs




이글이 도움이 되셨다면 아래에 로그인이 필요없는 공감 버튼을 클릭해주세요 ^^