HTML5 캔버스 타일링 코드에 대한 자세한 설명

최근 웹사이트 프로젝트를 진행하고 있는데 캔버스를 많이 사용하는데, 캔버스에 그림을 그리려면 drawImage가 필요합니다. 그림이 상대적으로 작으므로 배경 이미지로 타일 효과가 필요합니다. PS (배경 이미지는 가로,세로 10px, 그려지는 캔버스는 가로,세로 200px)

처음에는 drawImage에서 그려왔기 때문에 방법은 1번

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){
    var can = document.createElement("canvas");
    can.width = 10;
    can.height = 10;
    var ctx2 = can.getContext("2d");
    ctx2.drawImage(img,0,0,10,10,0,0,10,10);
    ctx.fillStyle = ctx.createPattern(can,"repeat");
    ctx.fillRect(0,0,200,200);
}

을 사용했는데 배경이미지의 높이와 너비가 10인데 좀 번거로우시겠지만 한번에 해보시면 어떨까요? 그래서 이렇게 바뀌었습니다

으으으으

GOOD!
createPattern의 정의를 다시 살펴보겠습니다

createPattern() 메서드는 지정된 요소를 지정된 방향으로 반복합니다.
요소는 이미지, 동영상 또는 기타 50deac90c8f74b69391c9996b22bd408 요소일 수 있습니다.
반복되는 요소는 직사각형, 원, 선 등을 그리거나 채우는 데 사용할 수 있습니다.

JavaScript 구문:

var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var img = new Image();
//需要平铺的图片
img.src = "test1_bg.jpg";
img.onload = function (){
    var pat = ctx.createPattern(img,"repeat");
    ctx.rect(0,0,200,200);
    ctx.fillStyle = pat;
    ctx.fill();
}

매개변수 설명

repeat	默认。规定要使用的图片、画布或视频元素。
repeat-x	该模式只在水平方向重复。
repeat-y	该模式只在垂直方向重复。
no-repeat	该模式只显示一次（不重复）。

반복

기본값. 사용할 이미지, 캔버스 또는 비디오 요소를 지정합니다.

repeat-x

이 패턴은 가로로만 반복됩니다.

repeat-y

이 패턴은 수직 방향으로만 반복됩니다.

반복 없음

이 모드는 한 번만 표시됩니다(반복되지 않음).

위 내용은 HTML5 캔버스 타일링 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!