Görüntü kullanmak:
Örnek
tuval üzerine resim çizin:
JavaScript:
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() | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
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.
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:
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:
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 " Örnek
Video kullanımı (press Play to start the demonstration) :
Tuval:
JavaScript (kod videosu her 20 milisaniye mevcut çerçevesini ç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,5,5,260,125)},20);},false);
v.addEventListener('pause',function() {window.clearInterval(i);},false);
v.addEventListener('ended',function() {clearInterval(i);},false); Kendin dene " <Tuval Nesne