HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML 캔버스 createPattern() 메서드

createPattern()는 Canvas 2D API는 지정된 이미지 (CanvasImageSource)를 사용하여 패턴을 생성하는 메서드입니다. 이 메서드는 repetition 매개변수를 통해 지정된 방향에서 원본 이미지를 반복합니다. 이 메서드는 CanvasPattern 객체를 반환합니다. CanvasPattern ctx.createPattern(image, repetition);

HTML canvas 참조 매뉴얼

사용된 이미지：

온라인 예제

水平和垂直方向에 이미지 반복：

JavaScript：

예제

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas createPattern() 메서드 사용(기본 튜토리얼 웹3codebox.com)</title>
</head>
<body>
<p>이미지 적용:</p>
<img src="haha.gif" id="lamp">
<p>화면:</p>
<button onclick="draw('repeat')">반복</button>　
<button onclick="draw('repeat-x')">반복-x</button>　
<button onclick="draw('repeat-y')">반복-y</button>　
<button onclick="draw('no-repeat')">불반복</button>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
您的浏览器不支持　HTML5　canvas 태그.
</canvas>
<script>
function draw(direction)
{
　　　　var c=document.getElementById("myCanvas");
　　　　var ctx=c.getContext("2d");
　　　　ctx.clearRect(0,0,c.width,c.height);　
　　　　var img=document.getElementById("lamp")
　　　　var pat=ctx.createPattern(img,direction);
　　　　ctx.rect(0,0,220,128);
　　　　ctx.fillStyle=pat;
　　　　ctx.fill();
}
</script>
</body>
</html>

테스트 봐보세요 ‹/›

브라우저 호환성

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 및 Safari가 createPattern() 메서드를 지원합니다。

注意：Internet Explorer 8 以及之前的版本不支持 <canvas> 元素。

定义和用法

createPattern（）方法沿指定方向重复指定的元素。
该元素可以是图像，视频或另一个<canvas>元素。
重复元素可用于绘制/填充矩形，圆形，直线等。

JavaScript 문법:	context.createPattern(image,"repeat\|repeat-x\|repeat-y\|no-repeat");

파라미터 값

파라미터	설명
image	사용할 모드의 이미지, 캔버스 또는 비디오 요소를 지정합니다.
repeat	기본 설정. 이 모드는 수평 및 수직 방향에서 반복됩니다.
repeat-x	이 모드는 수평 방향에서만 반복됩니다.
repeat-y	이 모드는 수직 방향에서만 반복됩니다.
no-repeat	이 모드는 한 번만 표시됩니다(반복되지 않습니다).

HTML canvas 참조 매뉴얼

HTML: <template> 태그