HTML5 캔버스 타일링 코드에 대한 자세한 설명-H5 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-04-18 09:59:11

원래의

2782명이 탐색했습니다.

최근 웹사이트 프로젝트를 진행하고 있는데 캔버스를 많이 사용하는데, 캔버스에 그림을 그리려면 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() 메서드는 지정된 요소를 지정된 방향으로 반복합니다.
요소는 이미지, 동영상 또는 기타 <캔버스> 요소일 수 있습니다.
반복되는 요소는 직사각형, 원, 선 등을 그리거나 채우는 데 사용할 수 있습니다.

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	该模式只显示一次（不重复）。