웹에서도 일러스트레이터 부럽지 않은 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) | |
| 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.