티스토리 뷰

💼 정보 ver1.0

그리기

James Wetzel 2012. 12. 17. 11:48
728x90
반응형

Canvas가 지원하는 도형

SVG와는 달리, Canvas는 단하나의 도형 직사각형만을 지원합니다.


Canvas 사각형 그리기

fillRect(x, y, width, height) : 속이 찬 사각형을 그립니다.

strokeRect(x, y, width, height) : 사각형의 테두리를 그립니다.

clearRect(x, y, width, height) : 지정한 영역을 지워서 완전히 투명하게 만듭니다.


<!DOCTYPE html>

<html lang="ko">

<head>

    <title>사각형 그리기</title>

    <meta charset="utf-8" />


    <script type="text/javascript">

        function rectDrawing() {

            var canvasObj = document.getElementById("myCanvas");

            if (canvasObj.getContext) {

                var canvas = canvasObj.getContext('2d');


                canvas.fillRect(25, 25, 100, 100);

                canvas.clearRect(45, 45, 60, 60);

                canvas.strokeRect(50, 50, 50, 50);

            }

        }

    </script>


</head>

<body>

    <h1>사각형 그리기</h1>

    <div onclick="rectDrawing();" style="cursor:pointer">사각형 그리기 호출</div>

    <canvas id="myCanvas" width="200" height="200">브라우져에서 지원하지 않습니다.</canvas>


</body>

</html>


Canvas 패스(pass)를 이용한 그리기

1단계: beginpath() 호출

2단계: 그려질 패스를 실제로 지정하는 메서드 호출(ex: moveTo(x, y), lineTo(x, y))

3단계: stroke(), fill() 메서드를 호출하여 그리기 시작.


<!DOCTYPE html>

<html lang="ko">

<head>

    <title>Path(패스) 그리기</title>

    <meta charset="utf-8" />

    <script type="text/javascript">

        function pathDrawing() {

            var canvasObj = document.getElementById('myCanvas');

            if (canvasObj.getContext) {

                var canvas = canvasObj.getContext('2d');


                canvas.beginPath();

                canvas.moveTo(75, 50);

                canvas.lineTo(100, 75);

                canvas.lineTo(100, 25);

                canvas.fill();


            }

        }

    </script>

</head>

<body>

    <h1>Path(패스) 그리기</h1>

    <div onclick="pathDrawing();" style="cursor:pointer">패스 그리기 호출</div>

    <canvas id="myCanvas" width="200" height="200">캔버스를 지원하지 않습니다.</canvas>

</body>

</html>


728x90
반응형
저작자표시 비영리 동일조건