Manual de referencia HTML

大全 de etiquetas HTML

Método createPattern() de HTML canvas

createPattern() es Canvas 2Método de uso de D API para crear patrones con imágenes especificadas (CanvasImageSource). Repite la imagen base en la dirección especificada mediante el parámetro repetición. Este método devuelve un objeto CanvasPattern. CanvasPattern ctx.createPattern(image, repetición);

Manual de referencia de canvas HTML

Imagen utilizada:

Ejemplo en línea

Repetir imagen en direcciones horizontal y vertical:

JavaScript：

Ejemplo

<!DOCTYPE html>
<html>
<cabecera>
<título>Uso del método HTML canvas createPattern() (Tutoriales básicos de la web oldtoolbag.com)</título>
</cabecera>
<body>
<p> Aplicación de imagen:</p>
<img src="haha.gif" id="lamp">
<p> lienzo:</p>
<button onclick="draw(#39;repeat#39;)">Repetir</botón>　
<button onclick="draw(#39;repeat-x#39;)">Repetir-x</botón>　
<button onclick="draw(#39;repeat-39;)">Repetir-y</botón>　
<button onclick="draw(#39;no-repeat#39;)">No repetir</botón>　　　　　
<canvas id="myCanvas" width="300" altura="150" estilo="borde:1px sólido #d3d3d3>
Su navegador no admite HTML5　etiqueta 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>

Pruebe y vea ‹/›

Compatibilidad del navegador

IEFirefoxOperaChromeSafari

Internet Explorer 9y Firefox, Opera, Chrome y Safari admiten el método createPattern().

Nota:Internet Explorer 8 Las versiones anteriores a la

Definición y uso

El método createPattern() repite el elemento especificado en la dirección indicada.
Este elemento puede ser una imagen, un video o otro elemento <canvas>.
Los elementos repetidos se pueden usar para dibujar/Rellenar rectángulos, círculos, líneas, etc.

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

Valor del parámetro

Parámetro	Descripción
image	Se especifica la imagen, lienzo o elemento de video a usar para el patrón.
repeat	Predeterminado. Este modo se repite en ambas direcciones.
repeat-x	Este modo se repite solo en la dirección horizontal.
repeat-y	Este modo se repite solo en la dirección vertical.
no-repeat	Este modo se muestra una vez (sin repetir).

Manual de referencia de canvas HTML

HTML: <template> etiqueta