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ü :
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.
UstaDerslik
