HTML 캔버스 createPattern() 메서드
사용할 이미지:
예시
가로 및 세로로 이미지를 반복합니다.
자바스크립트:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("lamp");
var pat = ctx.createPattern(img, "repeat");
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat;
ctx.fill();
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| createPattern() | Yes | 9.0 | Yes | Yes | Yes |
정의 및 사용
createPattern() 메서드는 지정된 방향으로 지정된 요소를 반복합니다.
요소는 이미지, 비디오 또는 다른 <canvas> 요소일 수 있습니다.
반복되는 요소는 직사각형, 원, 선 등을 그리거나 채우는 데 사용할 수 있습니다.
| 자바스크립트 구문: | 컨텍스트 .createPattern( 이미지 ,"반복|반복-x|반복-y|반복 없음"); |
|---|
매개변수 값
| Parameter | Description | Play it |
|---|---|---|
| image | Specifies the image, canvas, or video element of the pattern to use | |
| repeat | Default. The pattern repeats both horizontally and vertically | |
| repeat-x | The pattern repeats only horizontally | |
| repeat-y | The pattern repeats only vertically | |
| no-repeat | The pattern will be displayed only once (no repeat) |
❮ HTML 캔버스 참조