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 ]
Lundi 14 octobre 2019 - Semaine 42 - Saint Juste (Demain: Sainte Thérèse)
Aujourd'hui, c'est l'anniversaire de Alexandra Lamy (1975-44 ans), actrice française.
Haut de page Easy-Micro