<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>
Edition 1 | Chapitre 19 : Le dessin et les canvas / Page 259
Edition 2 | Chapitre 20 : Le dessin et les canvas / Page 281
Edition 3 | Chapitre 20 : Le dessin et les canvas / Page 281
En savoir plus
