프로그래밍 노트/HTML,CSS

[HTML] 캔버스(canvas) 기본 사용법

깡냉쓰 2018. 9. 18. 13:48
728x90
반응형

캔버스<canvas> 요소

HTML의 <canvas>는 웹페이지에서 그래픽적인 것을 그릴 때 사용된다.

<canvas id="test" width="150" height="150"></canvas>

src 및 alt 속성이 없다는 점만 제외하면 <img>요소와 비슷하게 보인다. <canvas> 요소에는 width와 height 두 속성만 존재한다.

<img>요소와 달리, <canvas> 요소는 닫는 태그 </canvas>가 필요하다.

 

렌더링 컨텍스트

<canvas> 요소는 고정된 크기의 드로잉 영역을 생성하며, 그 영역은 보여질 컨텐츠를 생성하고 다루게될 두가지 이상의 렌더링 컨텍스트를 노출시킨다.(2D, 3D)

 

캔버스는 처음에 비어있으며, 무언가를 표시하기위해서는 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록해야 한다. <canvas> 요소는 getContext() 메서드를 호출해서, 랜더링 컨텍스트와 그리기 함수들을 사용할 수 있다. 

var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");

<canvas> 요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 엑세스가 가능하다.

getContext() 메소드의 존재여부를 활용하여 지원하지 않는 브라우저에 대한 처리를 할 수 있다.

var canvas = document.getElementById("test");
if(canvas.getContext){
    var ctx = canvas.getContext("2d");
    
}else{
    // 
}​

 

 

 

 

 

기본 예제

간단한 두 개의 직사각형 그리기

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="application/javascript">
            function draw(){
                var canvas = document.getElementById("canvas");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");

                    ctx.fillStyle = "rgb(200, 0, 0)";
                    ctx.fillRect(10, 10, 50, 50);

                    ctx.fillStyle = "rgb(0, 0, 200, 0.5)";
                    ctx.fillRect(30, 30, 50, 50);
                }
            }
        </script>
    </head>
 <body onload="draw();">
    <canvas id="canvas" width="150" height="150">
        current stock price : ddd
    </canvas>
 </body>
</html>
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta charset="utf-8"/>
        <script type="application/javascript">
            function draw(){
                var canvas = document.getElementById("canvas");
                if(canvas.getContext){
                    var ctx = canvas.getContext("2d");

                    // Draw a Line
                    ctx.moveTo(0, 0);
                    ctx.lineTo(200, 200);
                    ctx.stroke();

                    // Draw a Circle
                    ctx.beginPath();
                    ctx.arc(75, 75, 40, 0, 2 * Math.PI);
                    ctx.stroke();

                    // Draw a Text
                    ctx.font = "15px Arial";
                    ctx.fillText("Hello World", 10, 50);
                }
            }
        </script>
    </head>
 <body onload="draw();">
    <canvas id="canvas" width="150" height="150" style="border:1px solid #000000;"></canvas>
 </body>
</html>
 

 

 

(내용 출처 : https://developer.mozilla.org/ko/docs/Web/HTML/Canvas/Tutorial/Basic_usage)

 

728x90
반응형