HTML5 Canvas Ders-7 Sayfaya Resim Eklemek (drawImage)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Canvas Ders-7 Sayfaya Resim Eklemek (drawImage)

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2634)
RAPOR ET
HTML5 serimize devam ediyoruz.Bu derste tuvalimize resim eklemeyi göreceğiz.Resim eklemeyi drawImage() koduyla yapıyoruz.Şimdi kodlara geçelim.

Her zamanki gibi önce tuvalimizi yaratıyoruz.

<canvas id="canvas" width="600" height="200"></canvas>


Şimdi bağlantı sağlayıp resmimizi ekleyelim.

<canvas id="canvas" width="600" height="200"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');

var logo=new Image();
logo.src="http://ustaderslik.com/resim/logo.png";

cizim.drawImage(logo,200,50,200,100)

</script>


Çıktısı şu olacaktır :
http://ustaderslik.com/resim/ders/tgu1k.png

İlk 2 kod zaten standart bağlantı kodumuz.
Daha sonra logo adlı bir değişken yaratıp bunun resim olacağını belirttim.Daha sonra src yani adresini atadım.
En son kodumuzda resmi basmamıza yaradı.Parametreleri sırasıyla şunlar :
1- resim değişkenimiz
2- x koordinatı
3- y koordinatı
4- width yani genişlik
5- height yani yükseklik

Genel örnek :

		<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
#canvas{border:2px solid #333;}
</style>
</head>
<body>

<canvas id="canvas" width="600" height="200"></canvas>

<script type="text/javascript">

var canvas = document.getElementById('canvas');
var cizim = canvas.getContext('2d');

var logo=new Image();
logo.src="http://ustaderslik.com/resim/logo.png";

logo.onload=function(){
cizim.drawImage(logo,200,50,200,100);
}

</script>
</body>
</html>


Burda farklı olarak onload kodu var.Onloadla logo yani resim hazırsa resmi bas dedik.Bu şekilde kullanmanız daha iyi.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol