yeon
yeon I am a Korean web programmer with bboy dancing as a hobby. :)

The canvas pattern

The canvas pattern

pattern

루프를 사용하여 만드는 패턴 외에 createPattern 메소드를 사용하여 패턴을 만들 수 있습니다.


createPattern(image, type)

  • image는 CanvasImageSource(즉, HTMLImageElement, 다른 캔버스,
  • type: repeat, repeat-x, repeat-y, no-repeat


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  // 패턴으로 사용할 이미지 오브젝트를 생성한다
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function() {

    // 패턴을 생성한다
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);

  }
}

pattern Image





comments powered by Disqus