Phương pháp createPattern() của canvas HTML

Định nghĩa và cách sử dụng

createPattern() Phương pháp lặp lại yếu tố được chỉ định trong hướng xác định.

Các yếu tố có thể là hình ảnh, video hoặc các yếu tố <canvas> khác.

Các yếu tố được lặp lại có thể được sử dụng để vẽ/điền hình vuông, hình tròn hoặc đường thẳng, v.v.

Mô hình

Hình ảnh được sử dụng:

lamp

Lặp lại hình ảnh theo hướng ngang và dọc:

Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.

JavaScript:

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();

Thử ngay

Cú pháp

context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");

Giá trị tham số

Tham số Mô tả
image Định nghĩa yếu tố hình ảnh, canvas hoặc yếu tố video cần sử dụng.
repeat Mặc định. Mô hình lặp lại theo cả hướng ngang và dọc.
repeat-x Mô hình chỉ lặp lại theo hướng ngang.
repeat-y Mô hình chỉ lặp lại theo hướng dọc.
no-repeat Mô hình này chỉ hiển thị một lần (không lặp lại).

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ yếu tố <canvas>.