Manuel de référence HTML

Complète liste des balises HTML

Méthode createPattern() de canvas HTML

createPattern() est Canvas 2D API Utilise l'image spécifiée (CanvasImageSource) pour créer un motif. Il répète l'image de base dans la direction spécifiée via le paramètre repetition. Ce méthode retourne un objet CanvasPattern. CanvasPattern ctx.createPattern(image, repetition);

Manuel de référence pour HTML canvas

Image utilisée :

Exemple en ligne

Répéter l'image dans les directions horizontale et verticale :

JavaScript :

Exemple

!DOCTYPE html>
<html>
<head>
<title>Utilisation de la méthode createPattern() de HTML canvas (Tutoriel de base du site web oldtoolbag.com)</title>
</head>
<body>
<p>Application de l'image :/p>
<img src="haha.gif" id="lamp">
<p>Canvas :</p>
<button onclick="draw('repeat')">Répéter</bouton>　
<button onclick="draw('repeat-x')">Répéter-x</bouton>　
<button onclick="draw('repeat-39;)">Répéter-y</bouton>　
<button onclick="draw('no-repeat')">Ne pas répéter</bouton>　　　　　
<canvas id="myCanvas" width="300" height="150" style="border:1px solide #d3d3d3>
Votre navigateur ne prend pas en charge HTML5　balise 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>

Voyons le test ‹/›

Compatibilité du navigateur

IEFirefoxOperaChromeSafari

Internet Explorer 9Firefox, Opera, Chrome et Safari prennent en charge la méthode createPattern().

Remarque :Internet Explorer 8 et les versions précédentes ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode createPattern() répète l'élément spécifié dans la direction indiquée.
L'élément peut être une image, une vidéo ou un autre élément <canvas>.
Les éléments répétés peuvent être utilisés pour dessiner/Remplir des rectangles, des cercles, des lignes, etc.

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

Valeur du paramètre

Paramètre	Description
image	Définir l'image, le canevas ou l'élément vidéo du mode à utiliser.
repeat	Par défaut. Ce mode répète dans les directions horizontale et verticale.
repeat-x	Ce mode répète uniquement dans la direction horizontale.
repeat-y	Ce mode répète uniquement dans la direction verticale.
no-repeat	Ce mode s'affiche une seule fois (sans répétition).

Manuel de référence pour HTML canvas

HTML: <template> balise