HTML5 CANVASImages
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])
<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>
<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>
