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 ]
Mardi 22 janvier 2019 - Semaine 04 - Saint Vincent (Demain: Saint Barnard)
Aujourd'hui, c'est l'anniversaire de Frank Leboeuf (1968-51 ans), footballeur français (défenseur). Autre 22 janvier: 1981 - Début de la série américaine Dallas sur les écrans français (TF1).
Haut de page Easy-Micro