Retourner à la page d'accueil de TJS

Script drawimage : Afficher des images dans un canvas

Utilisation de drawImage() pour afficher une image dans un canvas
Partie II : L'interactivité / Chapitre 19 : Le dessin et les canvas / Page 259

Exécution du script

Emulation de la console

Code source

<html><head><title>Afficher des images dans les canvas</title></head><body><h1>Afficher des images dans les canvas</h1><p>Un canvas de 300*300 avec des images</p><div class="dessin">  <canvas id="myCanvas" width="300" height="300"></canvas></div><script type="text/javascript">var myCanvas=document.getElementById("myCanvas");var myContext=myCanvas.getContext("2d");var logo=new Image();logo.src="media/logo-js.png";logo.onload=function() {  console.log(logo.src+" chargée");  /* Affichage de l'image en (2,2) redimensionné en 250px */  myContext.drawImage(logo, 2, 2, 250, 250);    /* Une fois que le logo JS est affiché, on peut charger le logo PHP */  var php=new Image();  php.src="media/logo-php.png";  php.onload=function() {    console.log(php.src+" chargée");    /* Affichage du logo PHP en (10,10) */    myContext.drawImage(php, 10, 10);    /* Affectation de transformation dans le contexte echelle à 0.5 */    myContext.setTransform(0.5, 0 , 0, 0.5, 0, 0);    myContext.rotate(Math.PI/4);    myContext.drawImage(php, 230, 120);    myContext.font="bold 40px arial";    myContext.fillStyle="#000";    myContext.fillText("Logo PHP", 230,120);    console.log(myCanvas.toDataURL().substr(0,100)+"...");  };  };/* Fonction de dessin d'une ligne entre (x1,y1) et (x2,y2) */function drawLine(ctx, x1, y1, x2, y2) {  ctx.beginPath();  /* 1er trait de la croix */  ctx.moveTo(x1, y1);  ctx.lineTo(x2, y2);  ctx.stroke();}/* Fonction de dessin d'un point sous forme de croix */function drawPoint(ctx, x, y, color) {  ctx.save();       /* Sauvegarde du style avant l'appel */  ctx.lineWidth=2;  ctx.strokeStyle=color;  ctx.setLineDash([]);  drawLine(ctx, x-5, y-5, x+5, y+5);  drawLine(ctx, x-5, y+5, x+5, y-5);  ctx.restore();    /* Le style d'avant l'appel est restauré */}</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...

Nouveau service en ligne de TJS

cleanMyJS : Détectez toutes les erreurs JavaScript de vos sitescleanMyJS.com
Détectez, enregistrez et analysez toutes les erreurs JavaScript de vos sites
Le 18/07/2019 14:55:49 sur php7 en 94.48 ms