méthode canevas HTML drawImage ()

Pour utiliser l'image:

Le Cri

Exemples

Pour dessiner une image sur le dessus de la toile:

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 »

support du navigateur

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

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

Définition et utilisation

drawImage () pour dessiner une image, une vidéo ou une toile sur la toile.

Certaines parties à drawImage () méthode peut aussi dessiner l'image, et / ou augmenter ou diminuer la taille de l'image.

syntaxe JavaScript

Position de l'image sur la toile:

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

Position de l'image sur la toile, et une largeur prédéterminée et la hauteur de l'image:

Syntaxe JavaScript:	contexte .drawImage (img, x, y, largeur, hauteur);

Couper l'image et de localiser la partie découpée sur toile:

Syntaxe JavaScript:	contexte .drawImage (img, sx, sy, swidth, sheight, x, y, largeur, hauteur);

Paramètre Valeur

Paramètres	description
img	Prédéterminé image toile ou vidéo que vous souhaitez utiliser.
sx	Optionnel. Commencer à couper la coordonnée x de la position.
sy	Optionnel. Commencez coordonnées y couper.
swidth	Optionnel. Elle est la largeur de l'image de coupe.
sheight	Optionnel. Image très coupé.
x	Lieu x position de l'image sur la toile de coordonnées.
y	Placez les coordonnées y de la position de l'image sur la toile.
largeur	Optionnel. Pour utiliser la largeur de l'image (par étirement ou le rétrécissement de l'image).
hauteur	Optionnel. La hauteur de l'image que vous souhaitez utiliser (par l'étirement ou le rétrécissement de l'image).

D'autres exemples

Exemples

Sur la toile le positionnement de l'image, puis spécifiez la largeur et la hauteur de l'image:

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 »

Exemples

Couper l'image et sur la toile des portions cisaillées sont positionnées:

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 »