Canvas tutorial #6 (Fill Styles)

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.4.에 작성된 글입니다.

※ 이 글은 해당사이트를 번역한 것입니다.

---

Color Fill(색상 채우기)

단색(solid color)으로 모양을 채우기 위해선,

fillStyle( ) 속성을 사용하여 RBG, HEX 등의 색상을 설정하고 fill( )을 사용하여 도형을 채울 수 있다.

특별한 명시가 없는 경우 HTML5Canvas 도형의 기본 채우기색은 검은색이다.

context.fillStyle = "color";
context.fill();

---

Linear Gradient(선형 그라데이션)

Linear gradient을 구현하기 위해선 createLinearGradation( )을 사용할 수 있다.

Linear gradient는 gradient의 방향을 정의하는 가상의 선으로 정의된다.

gradation을 만들었다면 addColorStop 속성을 사용하여 색상을 부여할 수 있다.

Color stops은 가상의 라인을 따라 배치 되며, 0은 시작점에 1은 끝점에 배치된다.

const grd = context.createLinearGradient(startX, startY, endX, endY);

grd.addColorStop(0, "color");
grd.addColorStop(1, "color");

context.fillStyle = grd";
context.fill();

---

Radial Gradient(원형 그라데이션)

Radial gradient을 구현하기 위해선 createLinearGradation( )을 사용할 수 있다.

Radial gradient은 두 개의 가상 원으로 정의되며, gradient는 시작 원에서 시작하여 끝 원으로 이동한다.

const grd = context.createRadialGradient(x1, y1, r1, x2, y2, r2);

grd.addColorStop(0, "color");
grd.addColorStop(1, "color");

context.fillStyle = grd;
context.fill();

/*
x1: 시작 원의 중점(x값)
y1: 시작 원의 중점(y값)
r1: 시작 원의 반지름
x2: 끝 원의 중점(x값)
y2: 끝 원의 중점(y값)
r2: 끝 원의 반지름
*/

---

Pattern(패턴)

pattern을 구현하기 위해선 패턴 객체를 반환하는 canvas context의 createPattern( )를 사용하고 fillStyle속성을 패턴 객체로 설정한 다음 fill( )을 사용하여 모양을 채울 수 있다.

createPattern( )는 이미지 객체와 repeat option를 필요로 한다.

특별한 명시가 없는 경우 repeat option의 default값은 repeat이다.

​

· repeat option 종류

repeat, repeat-x, repeat-y, no-repeat

const imageObj = new Image();

imageObj.onload = function() {
const pattern = context.createPattern(imageObj, 'repeat');

context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
context.fill();
};
imageObj.src = 'https://www.html5canvastutorials.com/demos/assets/wood-pattern.png';