HTML canvas drawImage() metodu

HTML5 Canvas Referans Kılavuzu

Tanım ve Kullanım

drawImage() Metin arayüzünde resim, arayüz veya videoyu çizer.

drawImage() Bu yöntem, resmin belirli bir kısmını çizebilir ve/veya boyutunu artırabilir veya azaltabilir.

Örnek

Örnek 1

Kullanılacak resim:

lale

Kanvas üzerine resim çizin:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);

Kişisel Deneyim

İpucu:Daha fazla örnek için sayfa altında bulunabilir.

Dilbilgisi

JavaScript dilbilgisi 1

Kanvas üzerinde resmi belirleyin:

context.drawImage(img,x,y);

JavaScript dilbilgisi 2

Kanvas üzerinde resmi belirleyin ve genişlik ve yükseklik belirleyin:

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

JavaScript dilbilgisi 3

Resmi kesin ve kanvas üzerinde kesilen kısmı belirleyin:

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

Parametre değeri

Parametre Açıklama
img Kullanılacak resim, kanvas veya video belirleyin.
sx İsteğe bağlı. Kesimin başlangıç x eksenindeki koordinat konumu.
sy İsteğe bağlı. Kesimin başlangıç y eksenindeki koordinat konumu.
swidth İsteğe bağlı. Kesilen resmin genişliği.
sheight İsteğe bağlı. Kesilen resmin yüksekliği.
x Kanvas üzerinde resmin x eksenindeki koordinat konumu.
y Kanvas üzerinde resmin y eksenindeki koordinat konumu.
width İsteğe bağlı. Kullanılacak resmin genişliği. (Resmi genişlet veya küçült):
height İsteğe bağlı. Kullanılacak resmin yüksekliği. (Resmi genişlet veya küçült):

Daha fazla örnek

Örnek 2

Kanvas üzerinde resmi belirleyin ve genişlik ve yükseklik belirleyin:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);

Kişisel Deneyim

Örnek 3

Resmi kesin ve kanvas üzerinde kesilen kısmı belirleyin:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript:

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

Kişisel Deneyim

Örnek 4

Kullanılacak video (sahne başlatmak için oynat düğmesine basın):

Kanvas:

Tarayıcınız HTML5 canvas etiketini desteklememektedir.

JavaScript (her 20 milisaniyede, kod video'nun mevcut kareğini çizer):

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,0,0,270,135)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false);

Kişisel Deneyim

Tarayıcı Desteği

Tabloda sayılar, bu özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtmektedir.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Açıklama:Internet Explorer 8 ve daha eski sürümler <canvas> ögesini desteklememektedir.

HTML5 Canvas Referans Kılavuzu