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");
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

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度（伸展或缩小图像）。
height	可选。要使用的图像的高度（伸展或缩小图像）。

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");
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 »