Méthode drawImage()du canvas HTML

HTML canvas 参考手册Manuel de référence HTML canvas

Image à utiliser :

The Scream

Exemple

Dessiner l'image sur le canvas :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
    ctx.drawImage(img,10,10);
}

Essayez-le vous-même »

Prise en charge des navigateurs

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome et Safari prennent en charge la méthode drawImage().

Remarque :Internet Explorer 8 et les versions antérieures ne prennent pas en charge l'élément <canvas>.

Définition et utilisation

La méthode drawImage() dessine une image, un canvas ou une vidéo sur le canvas.

La méthode drawImage() peut également dessiner des parties d'une image et/ou augmenter ou diminuer la taille de l'image.

Syntaxe JavaScript

Positionner une image sur le canvas :

Syntaxe JavaScript : context.drawImage(img,x,y);

Positionner une image sur le canvas et spécifier la largeur et la hauteur de l'image :

Syntaxe JavaScript : context.drawImage(img,x,y,width,height);

Découpez une image et positionnez la partie découpée sur le canvas :

Syntaxe JavaScript : context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

Valeurs des paramètres

Paramètre Description
img Spécifie l'image, le canvas ou la vidéo à utiliser.  
sx Facultatif. La coordonnée x de départ de la découpe.
sy Facultatif. La coordonnée y de départ de la découpe.
swidth Facultatif. La largeur de l'image découpée.
sheight Facultatif. La hauteur de l'image découpée.
x La coordonnée x pour placer l'image sur le canvas.
y La position de la coordonnée y pour placer l'image sur le canvas.
width Facultatif. La largeur de l'image à utiliser (étirer ou réduire l'image).
height Facultatif. La hauteur de l'image à utiliser (étirer ou réduire l'image).

实例

Plus d’exemples

Exemple

Positionnez l'image sur le canvas, puis spécifiez la largeur et la hauteur de l'image :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
img.onload = function(){
    ctx.drawImage(img,10,10,150,180);
}

Essayez-le vous-même »

Exemple

Découpez une image et positionnez la partie découpée sur le canvas :

Votre navigateur ne prend pas en charge la balise canvas HTML5.

JavaScript :

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);

Essayez-le vous-même »

Exemple

Vidéo à utiliser (appuyez sur le bouton lecture pour démarrer la démo) :

Canvas :

Votre navigateur ne prend pas en charge la balise canvas.

JavaScript (toutes les 20 millisecondes, le code dessine l'image courante de la vidéo) :

var v=document.getElementById("video1");
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play',function() {var i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Essayez-le vous-même »

HTML canvas 参考手册Manuel de référence HTML canvas Autres extensions