HTML tuval drawImage() Yöntemi

Kullanılacak resim:

Çığlık

Örnek

Resmi tuval üzerine ç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);
};

Tarayıcı Desteği

Tablodaki sayılar, yöntemi tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

Method
drawImage()	Yes	9.0	Yes	Yes	Yes

Tanım ve Kullanım

drawImage() yöntemi, tuval üzerine bir resim, tuval veya video çizer.

drawImage() yöntemi ayrıca bir görüntünün parçalarını çizebilir ve/veya görüntü boyutunu artırabilir/küçültebilir.

Not: Resim yüklenmeden önce drawImage() yöntemini çağıramazsınız. Resmin yüklendiğinden emin olmak için, window.onload()'dan veya document.getElementById(" imageID ").onload'dan drawImage()'ı çağırabilirsiniz.

JavaScript Sözdizimi

Resmi tuval üzerine yerleştirin:

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

Resmi tuval üzerine yerleştirin ve resmin genişliğini ve yüksekliğini belirtin:

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

Resmi kırpın ve kırpılan kısmı tuval üzerine yerleştirin:

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

Parametre Değerleri

Parameter	Description	Play it
img	Specifies the image, canvas, or video element to use
sx	Optional. The x coordinate where to start clipping
sy	Optional. The y coordinate where to start clipping
swidth	Optional. The width of the clipped image
sheight	Optional. The height of the clipped image
x	The x coordinate where to place the image on the canvas
y	The y coordinate where to place the image on the canvas
width	Optional. The width of the image to use (stretch or reduce the image)
height	Optional. The height of the image to use (stretch or reduce the image)

Daha fazla örnek

Örnek

Resmi tuval üzerine yerleştirin ve resmin 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);
};

Örnek

Resmi kırpın ve kırpılan kısmı tuval üzerine yerleştirin:

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