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

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1586)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/sd51sd41f2sd.png

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ı.



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