Html5 serimize devam ediyoruz.Bu derste
clip() methodunu anlatacağım.Clip kırpma anlamındadır.Canvasta ise yazıldığı yerde altaki tüm objeleri yukardakinin içine sokmasıdır.Yani yukarıdaki objeden taşan kısımları gizler.
Örneğin 50,50 konumunda 100x100 bir kumuz var.Bu kutudan hemen sonra clip kullanırsak ,clipten sonra oluşturulan objeler eğer bu 100x100 kutu dışında ise gözükmeyecektir.
İndir : http://ustaderslik.com/dosya/HTML5%20Canvas%20Ders-25%20clip()%20Kullanımı.zip
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var canvas = document.getElementById('canvas'),
cizim= canvas.getContext('2d');
cizim.save();
cizim.rect(50,100,500,220);
cizim.fillStyle = '#ddd';
cizim.fill();
cizim.clip();
cizim.fillStyle="#15d4f5";
cizim.fillRect(0,0,650,250);
cizim.restore();
cizim.fillStyle="#15d4f5";
cizim.fillRect(100,250,300,200);
})
</script>
<style type="text/css">
canvas{border:1px solid #ddd;margin-left:100px;margin-top:50px;}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
</html>
Görüntüsü :
Yukarıda ilk gri renkteki kutuyu çizdik ardından clip kullanıp büyük mavi kutu çizdirdik ama mavi kutunun gri kutudan taşan kısımları gizlendi.Geçen derste öğrendiğimiz
http://ustaderslik.com/konu.php?k=HTML5%20Canvas%20Ders-24%20save()%20ve%20restore()%20Kullan%C4%B1m%C4%B1
save ve restore methodları sayesinde son çizdirdiğimiz kutunun bu clipten etkilenmesini engelledik.Save ve restore methodlarını kullanmasaydık oda kırpılacaktı.
UstaDerslik
