웹에서도 일러스트레이터 부럽지 않은 html5 요소

1. Opening

See the Pen public.re.kr/170-1-0-01 by Lee Deokho (@duqe) on CodePen.

2. Drawing

2.1. Rectangle

도형 메서드	설명
strokeRect(x, y, w, h)	테두리만 있는 사각형
fillRect(w, y, w, h)	색이 채워진 사각형
clearRect(x, y, w, h)	레이어 마스크 느낌(?)이 아니고, 완전 clear임.
strokeText()
drawImage()

See the Pen public.re.kr/165-2-1-01 by Lee Deokho (@duqe) on CodePen.

2.2. Line

작업순서	패스 기반 메서드	설명
1	beginPath()	이전 패스 삭제, 새로운 패스 시작
3	closePath()	현재 패스 닫음. 시작점과 끝점 연결하여 닫힌 모양의 도형 생성
2	moveTo(x, y)	x, y 좌표를 시작으로 새로운 서브패스 생성
	lineTo(x, y)	바로 이전의 점과 x, y를 연결하는 선 긋기
	rect(x, y, w, h)	사각형
	arc(...)	원 또는 원호
4	stroke()	현재 패스에 있는 도형들을 선 형태로 실제로 캔버스에 생성
	fill()	현재 패스에 있는 도형들의 내부를 채워 실제로 캔버스에 생성

See the Pen public.re.kr/165-2-2-01 by Lee Deokho (@duqe) on CodePen.

2.3. Polygon

See the Pen public.re.kr/165-2-3-01 by Lee Deokho (@duqe) on CodePen.

2.4. Circle & Arc

arc() 인자	중심점		반지름	시작 라디안 (radian)	종료 라디안 (radian)	그리는 방향
표시	x	y	r	degree*Math.PI/180	degree*Math.PI/180	true (Anticlockwise) / false (Clockwise)

See the Pen public.re.kr/165-2-4-01 by Lee Deokho (@duqe) on CodePen.

3. Style

3.1. Line

선 스타일 관련 속성	내용
strokeStyle	색상명, FF, rgb(), rgba()
lineWidth	픽셀, 1.0(Default)
lineJoin	bevel, round, miter(Default)
lineCap	butt(Default), round, square
setLineDash([x1, x2, ..., xn])	점선 패턴

See the Pen public.re.kr/165-3-1-01 by Lee Deokho (@duqe) on CodePen.

3.2. Fill

채우기 스타일 속성	내용
fillStyle	도형을 채우는 색상
globalAlpha	투명도

See the Pen public.re.kr/170-3-2-01 by Lee Deokho (@duqe) on CodePen.

3.3. Gradation

그라데이션 메서드	내용
createLinearGradient(x1, y1, x2, y2)	선형 그라데이션. x1/y1(시작점)  x2/y2(종료점).    →(0, 0, 150, 0), ↓(0, 0, 0, 150), ↘(0, 0, 150, 150), ↖(150, 150, 0, 0), ↗(0, 150, 150, 0), ↙(150, 0, 0, 150)
createRadialGradient(x1, y1, r1, x2, y2, r2)	방사형 그라데이션 r(반지름)
addColorStop(오프셋, 색상)	그라데이션 경계색, 오프셋(0.0~1.0)

 

See the Pen public.re.kr/165-3-3-01 by Lee Deokho (@duqe) on CodePen.

3.4. Pattern

순서	채우기 위한 이미지 패턴 코딩	내용
1	let image = new Image(); image.src = "image URL";	이미지 객체 image 생성 후 url저장
2	let patternImage = mainContext.createPattern(image, 반복형식);	createPattern 메서드 사용 이미지 패턴 객체 생성
3	mainContext.fillStyle = patternImage;	fillStyle 속성을 이미지 패턴 객체로 지정
※ 반복형식 : no-repeat / repeat-x / repeat-y / repeat(Default)

See the Pen public.re.kr/165-3-4-01 by Lee Deokho (@duqe) on CodePen.

3.5. Shadow

그림자 속성	shadowColor	shadowOffsetX	shadowOffsetY	shadowBlur
내용	rgba(0, 0, 0, 0)(Default)	0 (Default)	0 (Default)	0 (Default)

 

See the Pen public.re.kr/165-3-5-01 by Lee Deokho (@duqe) on CodePen.

 

3.6. Shape Composition

globalCompositeOperation의 속성값	결과			내용
	대상	교집합	소스
source-atop	D	S	X	대상위에 소스 표시, 겹치지않는 소스 미표시
source-in	X	S	X	대상안에 있는 소스 부분만 표시
source-out	X	X	S	대상밖에 있는 소스 부분만 표시
source-over (Default)	D	S	S	대상위에 소스 표시
destination-atop	X	D	S	소스위에 대상 표시, 겹치지않는 대상 미표시
destination-in	X	D	X	소스안에 있는 대상 부분만 표시
destination-out	D	X	X	소스밖에 있는 대상 부분만 표시
destination-over	D	D	S	소스위에 대상 표시
lighter	D	D+S	S	교집합은 두 색의 합으로 표시
copy	X	S	S	소스만 표시
xor	D	X	S	교집합 제외 모두표시

See the Pen public.re.kr/165-3-6-01 by Lee Deokho (@duqe) on CodePen.

 

4. Drawing Text & Image

4.1. Text

텍스트 그리기 관련 메서드	내용
storkeText(text, x, y, [maxWidth])	x, y를 기준으로 테두리만 있는 텍스트
fillText(text, x, y, [maxWidth])	x, y를 기준으로 색이 채워진 텍스트
변수 = context.measureText(text)	변수.width 현재 글꼴에서 주어진 텍스트의 폭

텍스트 그리기 관련 속성	내용
font	"10, sans-serif" (Default)
textAlign	left, right, center, start (Default), end
textBaseline	top, hanging, middle, alphabetic (Default), ideographic, bottom

See the Pen public.re.kr/165-4-1-01 by Lee Deokho (@duqe) on CodePen.

4.2. Image

drawImage() 메서드의 활용	내용
imageURL, dx, dy	원본이미지를 캔버스 위치(dx/dy)에 생성
imageURL, dx, dy, dw, dh	원본이미지를 캔버스 위치(dx/dy)에 dw/dh 크기로 생성
imageURL, sx, sy sw, sh, dx, dy dw, dh	원본 위치(sx/sy)에서, sw/sh 크기로 잘라, 캔버스 위치(dx/dy)에 dw/dh 크기로 생성

See the Pen public.re.kr/165-4-2-01 by Lee Deokho (@duqe) on CodePen.

5. Shape Transform

5.1. Translate()

See the Pen public.re.kr/165-5-1-01 by Lee Deokho (@duqe) on CodePen.

5.2. Scale()

See the Pen public.re.kr/165-5-2-01 by Lee Deokho (@duqe) on CodePen.

5.3. Rotate()

See the Pen public.re.kr/165-5-3-01 by Lee Deokho (@duqe) on CodePen.

[참고자료]

• 이관용, HTML5 웹 프로그래밍, KNOU Press, 2023.