HTML5 Canvas Ders-13 scale() Kullanımı
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-13 scale() Kullanımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(1766)
RAPOR ET
HTML5 derslerimize devam ediyoruz.Bu derste scale() kodunu işleyeceğiz.Öncelikle işlevinden başlayalım.Tuvalimize bir çeşit zoom yani büyültme veya küçültme işlevindedir.Biraz sonra örnek yaparken daha iyi anlarsınız.Şimdi örneğe başlayalım.

Kodumuz :
scale(scalewidth,scaleheight);


Scalenin standart değeri 1,1 dir.Bu değerleri artırdığımızda büyüme işlemi,azaltığımızda küçültme işlevi yapıyor.
scalewidth :yatay olarak büyültme veya küçültme yapıyor.
scaleheight :dikey olarak büyültme ve küçültme yapıyor .

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<style type="text/css">
#canvas{border:2px solid #DDD;}
</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');

cizim.beginPath();
cizim.rect(10, 60, 120, 50);
cizim.fillStyle = '#666666';
cizim.fill();

cizim.scale(1,2);

cizim.beginPath();
cizim.rect(400, 30, 120, 50);
cizim.fillStyle = '#666666';
cizim.fill();

</script>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/Kr9mnz.png

Gördüğünüz gibi aynı boyutlarda 2 kutu çizdirdim ama 2 kutu daha yüksek.Bunun sebebi 2 kutudan önce
cizim.scale(1,2);

yazarak tuvalin yüksekliğini 2 ye katla dedim.O yüzden 2 kutu ilkinin 2 katı yüksekliğe sahip oldu.

Temel olrak kullanımı bu kadar.



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