HTML canvas drawImage() Method

Görüntü kullanmak:

Çığlık

Örnek

tuval üzerine resim çizin:

JavaScript:

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

Kendin dene "

Tarayıcı Desteği

Tablodaki rakamlar tam yöntemini destekleyen ilk tarayıcı sürümü belirtin.

Yöntem
drawImage()	Evet	9.0	Evet	Evet	Evet

Tanımı ve Kullanımı

drawImage() metodu tuval üzerine bir resim, branda, veya video çizer.

drawImage() yöntemi, bir resmin parçaları çekmek ve / veya artış / görüntü boyutunu azaltabilir.

Not: çağrı yapamazsınız drawImage() görüntü yüklendikten önce yöntemi. Görüntü yüklenmiş olduğundan emin olmak için, Arayabileceğin drawImage() from window. onload() drawImage() from window. onload() ya da gelen document. getElementById(" imageID ") .onload document. getElementById(" imageID ") .onload .

JavaScript sözdizimi

Tuval üzerine görüntüyü yerleştirin:

JavaScript sözdizimi:	context . drawImage( img,x,y ) ;

Tuval üzerine görüntüyü yerleştirin ve görüntünün genişliğini ve yüksekliğini belirtin:

JavaScript sözdizimi:	context . drawImage( img,x,y,width,height ) ;

Görüntüyü Klip ve tuval üzerine kısaltıldı parçasını konumlandırmak:

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

Parametre Değerleri

Parametre	Açıklama	Oynat
img	Kullanılacak görüntü, tuval veya video elemanını belirtir
sx	İsteğe bağlı. kırpma başlatmak için burada x koordinatı	Oynat "
sy	İsteğe bağlı. kırpma başlatmak için burada y koordinatı	Oynat "
swidth	İsteğe bağlı. Kesilmiş resim genişliği	Oynat "
sheight	İsteğe bağlı. Kesilmiş resim yüksekliği	Oynat "
x	Tuval üzerine görüntüyü nereye yerleştirileceğini x koordinatı	Oynat "
y	tuvale resim yerleştirmek için burada y koordinatı	Oynat "
width	İsteğe bağlı. Görüntünün genişliğini kullanmak üzere (stretch or reduce the image)	Oynat "
height	İsteğe bağlı. Resim yüksekliği kullanımı (stretch or reduce the image)	Oynat "

Diğer Örnekler

Örnek

Tuval üzerine görüntüyü yerleştirin ve görüntünün genişliğini ve yüksekliğini belirtin:

JavaScript:

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

Kendin dene "

Örnek

Görüntüyü Klip ve tuval üzerine kısaltıldı parçasını konumlandırmak:

JavaScript:

window.onload = function() {
    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);
};

Kendin dene "