Canvas fillStyle() 이란?

✔️ fillStyle()

모양 내부에서 사용할 색상, 그라데이션 또는 패턴을 지정합니다. 기본 스타일은 (검정)입니다. #000

 

💡 예제 1. 사각형에 파란색 채우기 색상을 적용

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

 

See the Pen Untitled by 최성식 (@sssungsik) on CodePen.

 

 

💡 예제 2. 루프를 사용하여 여러가지 색상을 채우기

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.fillStyle = `rgb(
        ${Math.floor(255 - 42.5 * i)}
        ${Math.floor(255 - 42.5 * j)}
        0)`;
    ctx.fillRect(j * 25, i * 25, 25, 25);
  }
}

 

See the Pen Untitled by 최성식 (@sssungsik) on CodePen.