Manuale di riferimento HTML

Completo elenco dei tag HTML

Metodo createPattern() di HTML canvas

createPattern() è un metodo dell'API Canvas 2D che utilizza un'immagine specificata (CanvasImageSource) per creare un modello. Questa funzione ripete l'immagine di base nella direzione specificata tramite il parametro repetition. Il metodo restituisce un oggetto CanvasPattern. CanvasPattern ctx.createPattern(image, repetition);

Manuale di riferimento per HTML canvas

Immagine utilizzata:

Esempio online

Ripeti l'immagine in direzione orizzontale e verticale:

JavaScript:

Esempio

<!DOCTYPE html>
<html>
<head>
<title>Utilizzo del metodo createPattern() di HTML canvas (Guida di base su oldtoolbag.com)</title>
</head>
<body>
<p>Applicazione dell'immagine:</p>
<img src="haha.gif" id="lamp">
<p>Canva:</p>
<button onclick="draw('repeat')">Ripeti</button>　
<button onclick="draw('repeat-x')">Ripeti-x</button>　
<button onclick="draw('repeat-y')">Ripeti-y</button>　
<button onclick="draw('no-repeat')">Non ripetere</button>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag 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>

Testa e guarda ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

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

注意：Attenzione：

Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso
Il metodo createPattern() ripete l'elemento specificato nella direzione indicata.
L'elemento può essere un'immagine, un video o un altro elemento <canvas>.

Gli elementi ripetuti possono essere utilizzati per disegnare/pieni rettangoli, cerchi, linee ecc.	Sintassi JavaScript:contextimage.createPattern(

,"repeat|repeat-x|repeat-y|no-repeat");

Parametro	Descrizione
image	Specificare l'elemento immagine, canvas o elemento video da utilizzare per il modello.
repeat	Predefinito. Questa modalità viene ripetuta sia in direzione orizzontale che verticale.
repeat-x	Questa modalità viene ripetuta solo nella direzione orizzontale.
repeat-y	Questa modalità viene ripetuta solo nella direzione verticale.
no-repeat	Questa modalità viene visualizzata una volta sola (non ripetuta).

Manuale di riferimento per HTML canvas

HTML: <template> etichetta