Canvas drawImage() yöntemi
Tanım ve Kullanım
drawImage() yöntemi, panoya, panoyu veya videoyu çizer.
drawImage() Yöntem, görüntüün belirli bir kısmını çizmek de dahil olmak üzere, boyutunu artırmak veya azaltmak da olabilir.
Örnek
Örnek 1
Kullanılacak resim:
Görüntüyü panoya çizin:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
İpucu:Daha fazla örnek için sayfa altında.
dilbilgisi
JavaScript dilbilgisi 1
Görüntüyü panoda konumlandırın:
context.drawImage(img,x,y);
JavaScript dilbilgisi 2
Görüntüyü panoda konumlandırın ve görüntü genişliğini ve yüksekliğini belirtin:
context.drawImage(img,x,y,width,height);
JavaScript dilbilgisi 3
Kesilmiş resmi kes ve panoda kesilen kısmı konumlandırın:
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
parametre değeri
| parametre | Açıklama |
|---|---|
| img | Kullanılacak görsel, kanvas veya videoyu belirleyin。 |
| sx | Opsiyonel. Kesmeye başlanacak x eksen koordinatı. |
| sy | Opsiyonel. Kesmeye başlanacak y eksen koordinatı. |
| swidth | Opsiyonel. Kesilen görselin genişliği. |
| sheight | Opsiyonel. Kesilen görselin yüksekliği. |
| x | Kanvas üzerinde görseli yerleştiren x eksen koordinatı. |
| y | Kanvas üzerinde görseli yerleştiren y eksen koordinatı. |
| width | Opsiyonel. Kullanılacak görselin genişliği。（Görseli genişlet veya küçült） |
| height | Opsiyonel. Kullanılacak görselin yüksekliği。（Görseli genişlet veya küçült） |
Daha fazla örnek
Örnek 2
Kanvas üzerinde görseli konumlandırın ve görselin genişliğini ve yüksekliğini belirleyin：
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10,240,160);
Örnek 3
Görseli kesin ve kanvas üzerinde kesilen bölümü konumlandırın：
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);
Örnek 4
Kullanılacak video（demoyu başlatmak için oynat düğmesine basın）：
Kanvas:
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);
Tarayıcı Desteği
Tablodaki numaralar, 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> elementini desteklememektedir.
