Retourner à la page d'accueil de TJS

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é / Chapitre 19 : Le dessin et les canvas / Page 257

Exécution du script

Emulation de la console

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>

Mon nouveau livre Tout JavaScript chez Dunod

Tout JavaScript le livre chez DunodEn savoir plus
Sortie le 6 février 2019

Version papier à 29€90
Format électronique à 21€90.

Commandez en ligne Dunod  Fnac  Amazon

Chercher une fonction, un objet, ...

Le graph des objets JavaScript



Chargement
en cours...
Le 08/12/2019 01:15:18 sur php7 en 21.95 ms