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 ]
Mercredi 20 mars 2019 - Semaine 12 - Saint Herbert (Demain: Sainte Clémence)
Aujourd'hui, c'est l'anniversaire de Danièle Gilbert (1943-76 ans), animatrice de télévision française et de Marthe Villalonga (1932), actrice française. Autre 20 mars: 1815 : de retour de l'île d'Elbe et après une marche triomphale sur Paris, Napoléon entre dans la capitale. 1965 : France Gall gagne l'Eurovision pour le Luxembourg avec Poupée de cire poupée de son.
Haut de page Easy-Micro