Script pattern : Dessin de motifs Pattern dans un canvas
Utilisation de l'objet Pattern pour remplir une forme avec un motif
Partie II : L'interactivité
Edition 1 | Chapitre 19 : Le dessin et les canvas / Page 257
Edition 2 | Chapitre 20 : Le dessin et les canvas / Page 279
Edition 3 | Chapitre 20 : Le dessin et les canvas / Page 279
Exécution du script
Code source
<html><head><title>Motif et pattern dans les canvas</title></head><body><h1>Motif et pattern dans les canvas</h1><p>Un canvas de 300*300 avec du remplissage par motif</p><div class="dessin"> <canvas id="myCanvas" width="300" height="300"></canvas></div><script type="text/javascript">/* Remplissage par un pattern */var myCanvas=document.querySelector("#myCanvas");var myContext=myCanvas.getContext("2d");var img=new Image(); /* Création d'un objet Image */img.src="media/ballon.png"; /* L'image d'un ballon */img.onload=function() { /* Attendre le chargement de l'image */ var pattern=myContext.createPattern(img, "repeat"); myContext.fillStyle=pattern; myContext.fillRect(0,0,290,115); myContext.rect(1,1,290,115); myContext.stroke();}</script><style type="text/css"> div.dessin { background: #fff; padding:5px; text-align: center; }</style></body></html>
Troisième édition Tout JavaScript chez Dunod
En savoir plusSortie le 4 janvier 2023
Version papier 29€90
Format électronique 22€99.
Commandez en ligneLe graph des objets JavaScript
Chargement
en cours...
