Easy-Micro


LANGAGE HTML5 CANVAS
Images

Insérer des images dans un canvas

Pour insérer une image dans un canvas, on utilise la méthode drawImage(img,x,y) qui copie l'image img chargée sur la surface de dessin, aux coordonnées (x,y).



<canvas id="monCanvas" width="265" height="60" style="border:none;"></canvas>

<script type="text/javascript">
var c=document.getElementById("monCanvas");
var ctx=c.getContext('2d');

var image = new Image();
image.src = 'images/logo-easy-micro.png';
image.onload = function() {
ctx.drawImage(this,0,0);
};
</script>

Syntaxe de la methode drawImage :
drawImage(image, position_en_x, position_en_y, [largeur image], [hauteur image])

Roation d'une image dans un canvas



<canvas id="monCanvas2" width="550" height="550" style="border:none;"></canvas>

<script type="text/javascript">
var c2=document.getElementById("monCanvas2");
var ctx2=c2.getContext('2d');
var centrel = c2.width/2;
var centreh = c2.height/2;

ctx2.translate(centrel,centreh); // on se déplace au centre du canvas

var image2 = new Image();
image2.src = 'images/logo/logo-easy-micro-3.png';

image2.onload = function() {
for (i = 0; i < 10; i++) {
ctx2.rotate(0.2 * Math.PI);
ctx2.drawImage(this,0,0);
}

}
</script>

Pour aller plus loin...



Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Vendredi 22 novembre 2019 - Semaine 47 - Sainte Cécile (Demain: Saint Clément)
Aujourd'hui, c'est l'anniversaire de Stéphane Freiss (1960-59 ans), acteur français.
Haut de page Easy-Micro