스타일과 색 적용하기 - 02

패턴(Patterns)

• createPattern(image, type)
  • 새 캔버스 패턴 객체를 만들어 반환한다
  • image는 CanvasImageSource (즉, HTMLImageElement, 다른 캔버스, <video> 요소 등등)입니다.
  • type은 이미지 사용 방법을 나타내는 문자열

type은 패턴을 만들기 위해 이미지를 사용하는 방법을 지정하며, 다음 문자열 값 중 하나이다.

• repeat
  • 수직 및 수평 방향으로 이미지를 이어 붙임
• repeat-x
  • 수평 방향으로만 이미지를 이어 붙임
• repeat-y
  • 수직 방향으로만 이미지를 이어 붙임
• no-repeat
  • 이미지를 이어 붙이지 않음, 이미지는 한번만 사용

이 메소드를 사용하여 위에서 본 그라디언트 메소드와 매우 유사한 CanvasPattern객체를 생성, 패턴을 생성하면 fillStyle 또는 strokeStyle 속성에 패턴을 할당한다.
예를 들면 다음과 같다.

var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img, 'repeat');

참고
drawImage () 메서드와 마찬가지로 이 메소드를 호출하기 전에 이미지가 로드되었는지 확인해야합니다. 그렇지 않으면 패턴이 잘못 그려 질 수 있습니다.

createPattern 예제

이미지 로드시간을 고려하여 로드가 완료되면 캔버스를 그리도록 설정해야한다.

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
   
    if(canvas.getContext){
            draw();
    }

   function draw(){
       //image객체 생성
      let img = new Image();
      //이미지 소스 주소 할당
      img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';

      //이미지가 로드되도록 기다리는 함수 
      img.onload = function(){
          //패턴 생성
          let ptrn = ctx.createPattern(img, 'repeat');
          //스타일에 패턴 할당
          ctx.fillStyle = ptrn;
          ctx.fillRect(0,0,200,200);
      }
   }

그림자

• shadowOffsetX = float

  • 그림자가 객체에서 연장되어야하는 수평 거리를 말함
  • 이 값은 변환 행렬의 영향을 받지 않음. 기본값은 0.

• shadowOffsetY = float

  • 그림자가 객체에서 연장되어야하는 수직 거리를 말함
  • 이 값은 변환 행렬의 영향을 받지 않음. 기본값은 0.

• shadowBlur = float

  • 흐림(blur) 효과의 크기를 나타냄
  • 이 값은 픽셀 수와 일치하지 않으며 현재 변환 행렬의 영향을 받지 않음. 기본값은 0.

• shadowColor = color

  • 그림자 효과의 색상을 나타내는 표준 CSS 색상 값.
  • 기본적으로 완전 검은색

그림자 있는 글자 예

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
   
    if(canvas.getContext){
            draw();
    }

   function draw(){
       //그림자 위치 설정
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
        //그림자 흐림정도 설정
        ctx.shadowBlur = 2;
        //그림자 색상 설정
        ctx.shadowColor = "rgba(0,0,0,0.5)";

        //글자 사이즈, 폰트설정
        ctx.font = "20px Times New Roman";
        //글자색 설정
        ctx.fillStyle = "#000";
        //글자 및 글자 위치 설정
        ctx.fillText("I love Javascript", 50, 50);
   }

캔버스 채우기 규칙

fill (혹은 clip 및 isPointinPath)을 사용할 때 한 점이 경로 안쪽 또는 바깥에 있는지 그리고 따라서 채워지는지 여부를 결정하기 위한 채우기 규칙 알고리즘을 선택적으로 제공 할 수 있습니다. 경로가 교차하거나 중첩 된 경우에 유용합니다.

• "nonzero": non-zero winding rule 알고리즘. 기본값.
• "evenodd": even-odd winding rule 알고리즘.

    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
   
    if(canvas.getContext){
            draw();
    }

   function draw(){
  ctx.beginPath();
  //원래는 fillStyle을 적용하지 않았기때문에 검은색이 맞음 
  //그러나 알고리즘으로 색을 구분할 수 있게 만듦
  ctx.arc(50, 50, 30, 0, Math.PI * 2, true);
  ctx.arc(50, 50, 15, 0, Math.PI * 2, true);
  ctx.arc(50, 50, 50, 0, Math.PI * 2, true);
  ctx.fill('evenodd');
   }

위와 같이 fillStyle을 적용하지 않아도 even-odd 알고리즘으로 흰색이 추가되었다.
nonzero를 하면 검정색만을 사용한다.