html 캔버스 기능 정리하기

<캔버스 요소>

- <canvas> 태그로 요소 추가

ex) <canvas id = "canvas" width = "200" height = "100"> </canvas>

​

<컨텍스트 객체>

- 캔버스에 내용을 채우기 위한 객체 (그림 그리기)

- getContext("2d") 메소드

 

<기본 도형 메소드>

stroke() : 선을 그리는 메소드 (초기값은 검정색)

moveTo(x,y) : 선의 시작 지점의 좌표를 (x,y)로 이동

lineTo(x,y) : 시작지점에서 (x,y)까지 선을 그림

​

rect(x,y,width,height) : (x,y)지점을 왼쪽 위 모서리, width,height 길이의 사각형을 그린다.

arc(x,y,r,startAngle, endAngle, antiClockwise) : (x,y)시작점으로 하고 r을 반지름으로 하는 원을 그림 , 시작 각도와 끝 각도를 지정할 수 있으며, antiClockwise 값을 설정하면 반시계방향으로 원호가 그려진다.

​

quadraticCurveTo(cx,cy,x,y) : 하나의 제어점을 가지는 곡선을 그린다. (cx,cy)가 제어점이 되며, 끝점은 (x,y) 시작점은 현재위치이다.

bezierCurveTo(cx,cy1,cx2,cy2,x,y) : 두개의 제어점을 가지는 곡선을 그린다.

​

​

​

<경로 그리기>

beginPath() : 경로 지정 시작 메소드

closePath() : 경로 지정 종료 메소드, 마지막 위치에서 경로 시작점까지 직선 연결 후 현재위치를 경로 시작점으로 이동

​

​

​

<캔버스 초기화>

clearRrect(x,y,width,height) : (x,y)를 기준으로 지정한 넓이로 초기화

​

​

​

<선 색 및 스타일 지정>

linewidth : 선 두께를 픽셀수로 설정

strokeStyle : 선의 색상 지정

lineCap : 선 양쪽 끝 모양 지정 (butt, round, square)

lineJoin : 선이 꺾이는 모서리 모양 지정 (miter, round, bevel)

fillStyle : 도형 내부 색상 지정

fill() : fillStyle로 지정된 색상으로 도형을 채움. (fill() 실행 전의 모든 도형들)

​

​

<이미지 그리기>

image() 생성자를 이용하여 객체 생성

ex) var imgObj = new Image();

​

drawImage(이미지 객체 이름, x,y,width,height) : 이미지를 그리는 메소드

-> (x,y) 지점에 지정 넓이로 이미지 그리기

​

drawImage(x1,y1,width1,height1,x2,y2,width2,height2)

-> 원본 이미지의 (x1,x2) 지점에서 width1,height1크기의 이미지를 자른 후 (x2,y2) 지점에

width2, height2크기로 그림

​

​

​

<글자 그리기>

font : 글자체 지정 ( 크기, 폰트 등)

textAlign : 정렬 방식 지정 (left, right, center, start, end)

fillStyle : 글자 색상 지정

fillText(text,x,y) : fillStyle 색상으로, 지정된 위치에 글자를 그려 넣는 메소드, 글자의 왼쪽 위 모서리가 위치의 기준점

strokeText(text,x,y) : strokeStyle로 지정된 색상으로 (x,y) 위치에 text의 외곽선을 그려넣음. (내부가 비어있음)

​

​

​

<마우스로 그림 그리기>

- 마우스 이벤트로 설정 가능

mousedown : moveto() 메소드로 시작점을 설정하고 그리기 모드 설정

mousemove : 그리기 모드 설정 이후 이벤트 발 생시 마다 lineto()로 선분 연결

mouseup : 그리기 모드 해제

​

​

<그리기 효과>

합성(composition) 효과

​

globalAlpha : 투명도 (0~1)

​

clip() : 메소드 실행 이전 정의된 경로(path())로 도형 자르기

 

*그림자 효과

shadowColor

shadowBlur

shadowOffsetX - 그림자 크기

shadowOffsetY - 그림자 크기

​

*변환 효과

setTransform(1,2,3,4,5,6,) : 변환함수를 그리기 위해 가장 먼저 호출해야 하는 함수

1: 수평 확대/축소율

2: 수직방향 경사율

3: 수평방향 경사율

4: 수직방향 확대/축소율

5: 수평방향 이동거리

6: 수직방향 이동거리

*setTransform(1,0,0,1,0,0) : 아무런 변환을 지정하지 않은 기본 상태로 초기화

​

translate(x,y) : 도형, 그림의 위치를 (x,y) 만큼 이동

scale(x,y) : 가로 세로 방향의 배율을 (x,y) 값으로 확대/축소

rotate(r) : 각도 r만큼 도형/그림 회전 (360도 = 2*Math.PI)

scale() : 상하/좌우 대칭

ex) (-1,1) : 좌우대칭 , (1,-1) : 상하 대칭

​

​

​

​

<데이터 url 지정>

toDataURL() : 그림을 PNG 형태의 데이터로 변환 후 이를 캔버스 요소의 src 속성으로 지정하면 파일 저장 가능

ex) var data = canvas.toDataURL();

객체.src = data;

​

​