Latest web development tutorials

Metodo canvas HTML createPattern ()

HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento

Immagini utilizzate:

lampada

Esempi

Ripetere l'immagine in orizzontale e in verticale:

YourbrowserdoesnotsupporttheHTML5canvastag.

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

Prova »

Supporto per il browser

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer metodo 9, Firefox, Opera, Chrome e Safari supporto createPattern ().

Nota: 8 e versioni precedenti di Internet Explorer non supportano l'elemento <canvas>.


Definizione e utilizzo

Metodo createPattern () ripete un elemento specificato nella direzione specificata.

Gli elementi possono essere immagini, video o altro elemento <canvas>.

Essere elemento ripetuto può essere utilizzato per disegnare / riempire rettangolo, cerchio, la linea, o simili.

sintassi JavaScript: contesto .createPattern (immagine, "repeat |repeat-x | repeat-y | no-repeat");

Valore parametro

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


HTML Manuale di tela di riferimento HTML Manuale di tela di riferimento