[HTML5 웹 프로그래밍] 캔버스(canvas)

캔버스란?

자바스크립트 코드를 이용해서 웹브라우저에 그림을 그리는 기능

• 별도 프로그램 설치 없이 사용
• 그림을 그리고 합성 , 변환 애니메이션 같은 효과 표현 가능

캔버스 영역 지정

캔버스 영역

웹 페이지 에서 그림이 그려지는 투명한 사각형 영역

<canvas id="maCanvas" width="300" height="300" style="border:1px solid red"></canvas>

캔버스 객체와 캔버스 컨텍스트 객체 생성

캔버스 생성 → 캔버스 객체 생성 → 캔버스 컨텍스트 객체 생성 → 실제 그림을 그림

캔버스 객체 생성

let 변수명 = document.getElementById("canvcas_id_속성값");
let canvas = document.getElementById('maCanvas')

캔버스 컨텍스트 객체 생성

let 변수명 = canvas변수.getContext('2d');
let ctx = canvas.getContext('2d');

선 도형 그리기

사각형 그리기

strokeRect(x,y,w,h)

테두리만 있는 사각형

fillRect(x,y,w,h)

색이 채워진 사각형

clearRect(x,y,w,h)

지정한 사각형 영역을 지움

선 그리기

beginPath()

시작점 moveTo(x1,y1) → 끝점 lineTo(x2,y2) → 선 출력 stroke()

선들을 연결해서 연속적으로 선을 그리는 경우 → moveTo()와 stroke() 사이에 원하는 개수만큼 lineTo() 사용

다각형 그리기

beginPath()

시작점 moveTo() → 두 번째 점 lineTo() → ⋯ → (n-1) 번째 점 lineTo() → closePath() → stroke()/fill()

원/원호 그리기

beginPath()

arc(x,y,반지름,시작각도,종료각도,그리는방향) → stroke()/fill()

시작각도, 종료각도 → ‘각도*Math.PI/180’으로 표시, 각도는 3시 방향을 기준으로 해서 시계 방향으로 부여

그리는 방향 → 시계 방향 false(기본값), 반시계 방향 true

부채꼴 그리기

beginPath()

시작점 moveTo(x,y) → arc(x,y,반지름, ⋯ ) → closePath() → stroke()/fill()

스타일 지정

선 스타일

strokeStyle

선의 색상(또는 그라데이션, 패턴)

lineWidth

선의 두께

lineJoin

두 선이 만나 꺾이는 모서리 부분의 모양 지정(값→ bevel, round, miter)

lineCap

선의 양쪽 끝부분의 모양 지정(값→ butt, round, square)

setLineDash([패턴])

점선의 패턴을 지정 → 패턴은 점선에서 선이 그려지는 부분의 픽셀 개수와 그렇지 않은 부분의 픽셀 개수를 콤마로 구분해서 안에 표시

채우기 스타일

fillStyle

도형을 채우는 색상(또는 그라데이션, 패턴)

globalAlpha

색상의 투명도 지정(값→ 0.0 완전 투명 ~ 1.0 완전 불투명)

그라데이션 (메서드)

두 가지 이상의 색상이 점진적으로 변하는 효과

createLinearGradient(x1,y1,x2,y2)

선형 그라데이션 지정 → (x1,y1)과 (x2,y2)를 연결하는 가상의 직선이 그라데이션의 진행 방향이 됨

createRadialGradient(x1,y1,r1,x2,y2,r2)

방사형 그라데이션 지정 → 두 원의 중심의 좌표와 반지름에 따라 효과가 달라짐

addColorStop(오프셋, 색상)

그라데이션 경계색 지정 → 오프셋은 경계색의 위치를 지정(시작점 0.0 ~ 끝점 1.0)

패턴 스타일 (메서드)

createPattern(이미지변수, 반복형식) 메서드 → 이미지를 사용해서 선/도형의 스타일을 지정을 위한 패턴 생성

반복형식의 값 → no-repeat, repeat-x, repeat-y, repeat

그림자 스타일 (속성)

그림자 효과를 통해 도형에 입체감 부여

shadowColor

그림자의 색상

shadowOffsetX

대상을 기준으로 그림자의 수평 방향의 오프셋 (음수 가능)

shadowOffsetY

대상을 기준으로 그림자의 수직 방향의 오프셋 (음수 가능)

shadowBlur

그림자의 흐린 정도

도형 합성

globalCompositeOperation

도형 간의 겹치는 부분에 대한 처리 방식 지정 (값→ source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, copy, xor)

텍스트, 이미지 그리기

텍스트 그리기(메서드)

strokeText(텍스트, x, y)

지정된 위치 (x,y)를 기준으로 테두리만 있는 텍스트를 그림

fillText(텍스트, x, y)

지정된 위치 (x,y)를 기준으로 색으로 채워진 텍스트를 그림

measureText(텍스트)

현재 글꼴에서 주어진 텍스트의 폭을 반환

텍스트 그리기 (속성)

font

글자 스타일, 글자 크기, 글자체 지정

textAlign

수평 방향의 정렬 방식 지정 (값→ left, right, center, start, end)

textBaseline

텍스트의 수직 방향의 기준선 지정 (값→ top, hanging, middle, alphabetic, ideographic, bottom)

이미지 삽입

drawImage(이미지변수, dx, dy)

지정된 위치 (dx,dy)에서 원본 이미지를 원래 크기대로 삽입

drawImage(이미지변수, dx, dy, dw, dh)

지정된 위치 (dx,dy)에서 원본 이미지를 지정한 크기 dx×dy로 조정해서 삽입

drawImage(이미지변수, sx, sy, sw, sh, dx, dy, dw, dh)

원본 이미지의 (sx,sy) 위치에서 sw×sh 크기만큼 잘라내어 캔버스의 지정된 위치 (dx,dy)에서 dw×dh 크기로 삽입

도형 변환

캔버스 좌표계의 이동, 회전, 확대/축소를 통해 캔버스에 그려지는 도형을 변환시킬 수 있음

translate(x,y)

캔버스 좌표 공간의 원점을(x,y) 로 이동시킴

scale(x,y)

좌표 공간을 수평과 수직 방향으로 각각 x와 y만큼 확대/축소시킴

x,y > 1 → 확대

0 < x,y < 1 → 축소

x 또는 y가 음수인 경우 → 좌표축의 진행 방향이 반대가 됨

rotate(라디안각도)

좌표 공간의 왼쪽 상단 모서리(원점)를 기준으로 시계방향으로 주어진 각도만큼 회전시킴

사용자 정의 변환

trasnform(a,b,c,d,e,f)

호출될 때마다 이전 변환행렬의 값이 누적되어 적용됨

setTransform(a,b,c,d,e,f)

호출될 때마다 초기화되어 새로운 변환행렬이 적용됨

a → 수평으로 확대/축소, b → 수평으로 기울임, c → 수직으로 기울임, d → 수직으로 확대/축소, e → 수평으로 이동, f → 수직으로 이동