[canvas] 캔버스 기초 canvas foundation (원그리기, 사각형그리기)

캔버스 구조

width와 height를 나타내는 속성을 가지고 있으며, 함수로는 toDataURL, toBlob, getContext 함수를 가지고 있다. 여기서 가장 기본적으로 사용해야하는 것은 바로 getContext 함수로 자바스크립트에서 canvas의 context를 가져와서 그 context에 그림을 그리게 되는 것이다. 먼저 html태그에서 canvas태그를 넣어보자.

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

그래픽을 렌더링하기 위해서는 JavaScript로 참조 할 수 있게 아래의 소스를 넣어줘야 합니다.

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

<canvas> 엘리먼트에 대한 참조를 canvas 변수에 저장하였습니다. 그러고 나서는 캔버스에 그리기 위해 실질적으로 사용되는 도구인 2D rendering context를 ctx 변수에 저장하고 있습니다.

 

사각형 그리기

ctx.beginPath();  //시작명령어
ctx.rect(20, 40, 50, 50); // x좌표, y좌표, 가로값, 세로값
ctx.fillStyle = "#FF0000"; //색
ctx.fill();  //   채우기
ctx.closePath();   //종료명령어 

beginPath()와 closePath()메소드 사이에 모든 명령어가 들어갑니다. 우리는 rect()를 이용해서 직사각형을 정의했는데, 처음 두 값들은 캔버스의 좌상단 모서리로 부터의 좌표를 의미하고, 나머지 두 값은 직사각형의 너비와 높이를 의미합니다. 위 코드에서 직사각형은 캔버스 좌측에서 20픽셀 떨어져있고, 캔버스 상단에서 40픽셀만큼 아래로 떨어져 있습니다. 그리고 너비와 높이는 각각 50픽셀로 설정되어 완벽한 정사각형으로 그려지고 있습니다. fillStyle은  fill()메소드에서 칠해질 색상 값을 갖게 됩니다. 위 코드에서는 사각형을 빨간색으로 칠하고 있습니다.

원형 그리기

ctx.beginPath();
ctx.arc(240, 160, 20, 0, Math.PI*2, false); //arc(시작 X좌표 , 시작Y좌표 , 반지름 크기, 시작각도, 끝 각도 , 시계or반시계 방향true/false)
ctx.fillStyle = "green";
ctx.fill(); 
ctx.closePath();

위 코드에서 볼 수 있듯이beginPath()와 closePath()메소드가 다시 나왔습니다. 그 사이에, 가장 중요한 부분인 arc() 메소드가 있습니다. 이 메소드는 6개의 파라미터를 갖습니다.

• 원의 중심을 가리키는 x와 y좌표
• 원의 반지름
• 시작 각도와 끝 각도(원을 그릴 때 시작과 끝이되는 각도이며, 라디안 값입니다.)
• 그리는 방향(false를 넣으면 시계방향으로 그려집니다. 기본 값이나 true를 넣으면 반 시계방향으로 그려집니다.) 이 파라미터는 옵션입니다.

fillStyle속성은 이전과 조금 달라 보이는데, 이는 CSS에서 색상을 표현하는 여러가지 방법 중 하나입니다. 색상을 표현할 때, 16진수로 색상값을 표현하거나, 색상 키워드를 사용하거나, rgba() 함수를 사용하거나 그외에 다른 색상 메소드를 사용할 수 있습니다.

fill()을 사용해서 원에 색상을 채울 수 있다면,stroke()를 이용하면 원의 외곽선에 색상을 부여할 수 있습니다. 아래의 코드들도 여러분의 JavaScript에 추가해보세요.