Manual de referência HTML

大全 de etiquetas HTML

Método createPattern() do canvas HTML

createPattern() is Canvas 2The D API method for creating a pattern using a specified image (CanvasImageSource). It repeats the original image in the specified direction through the repetition parameter. This method returns a CanvasPattern object. CanvasPattern ctx.createPattern(image, repetition);

Manual de referência do canvas HTML

Image used:

Online Example

Repeat image in horizontal and vertical directions:

JavaScript:

Example

<!DOCTYPE html>
<html>
<head>
<title>Using HTML canvas createPattern() method (Basic Tutorial Website oldtoolbag.com)</title>
</head>
<body>
<p>Image applied:/p>
<img src="haha.gif" id="lamp">
<p>Canvas:/p>
<button onclick="draw(#39;repeat#39;)">Repeat</button>　
<button onclick="draw(#39;repeat-x#39;)">Repeat-x</button>　
<button onclick="draw(#39;repeat-39;)">Repeat-y</button>　
<button onclick="draw(#39;no-repeat#39;)>Do not repeat</button>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3>
Your browser does not support HTML5　canvas tag.
</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>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome e Safari suportam o método createPattern().

Atenção:Internet Explorer 8 Versões anteriores ao não suportam o elemento <canvas>.

Definição e uso

O método createPattern() repete o elemento especificado na direção especificada.
Este elemento pode ser uma imagem, vídeo ou outro elemento <canvas>.
Elementos repetidos podem ser usados para desenhar/Preencher retângulos, círculos, linhas e outros.

Sintaxe JavaScript:	context.createPattern(image,"repeat\|repeat-x\|repeat-y\|no-repeat");

Valor do parâmetro

Parâmetro	Descrição
image	Especificar o elemento de imagem, canvas ou vídeo a ser usado no modelo.
repeat	Padrão. Este modelo é repetido tanto na direção horizontal quanto na vertical.
repeat-x	Este modelo é repetido apenas na direção horizontal.
repeat-y	Este modelo é repetido apenas na direção vertical.
no-repeat	Este modelo é exibido apenas uma vez (não repetido).

Manual de referência do canvas HTML

HTML: <template> etiqueta