Makale Geçmişi

Canvas clip yöntemi, belirtilen bir yolu (çizgilerle oluşturulan bir çizim) kullanarak daha sonra oluşturulcak çizimler için bir pencere oluşturur. Sonradan yapılan çizimler, clip ile belirtilen şeklin içinden görünür. Dolayısıyla çizilen şekiller maskelenmiş olur. Kullanımı: ctx.clip();
Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />

<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

// clip'den önceki duruma dönebilmek için kapsam durumunu sakla.
ctx.save();

// Bir yıldız çiz.
ctx.beginPath();
ctx.moveTo(100, 52);
ctx.lineTo(116, 84);
ctx.lineTo(150, 88);
ctx.lineTo(126, 114);
ctx.lineTo(130, 150);
ctx.lineTo(100, 132);
ctx.lineTo(70, 150);
ctx.lineTo(76, 114);
ctx.lineTo(50, 90);
ctx.lineTo(84, 84);
ctx.closePath();

ctx.stroke(); // Kullanmak zorunlu değildir. fill de kullanabilirsiniz.

// Çizilen şekli kırpma alanı (pencere) olarak belirle.
ctx.clip();

// Kırmızı bir dörtgen çiz.
ctx.fillStyle = "red";
ctx.fillRect(100, 100, 40, 40);

// Kapsam durumunu geri yükle (clip işlemini bitir)
ctx.restore();
}
ciz();

</script>

Çıktı şöyle olacaktır: Görüldüğü gibi yıldız çizildikten ve kırpma alanı olarak belirlendikten sonra yapılan çizimlerin şeklin içinde kalan kısımları görüntülenmektedir. fillRect ve strokeRect gibi yol (path) oluşturmayan ( beginPath ile başlamadığınız) şekiller kırpma alanı olarak kullanılamaz. fillText ve strokeText yöntemleri de bir işe yaramaz. Yani clip kullanarak bir metin maskesi elde edemezsiniz. Metin maskesi oluşturma işlemi için Canvas globalCompositeOperation Özelliği makalesine bakabilirsiniz. Eğer dörtgen bir kırpma alanı belirlemek istiyorsanız rect yöntemini kullanın. Örnekte de belirtildiği gibi kırpma alanı hazırlandıktan sonra stroke veya fill yöntemlerini kullanmak zorunda değilsiniz. Ancak kırpma alanının şeklini göstermek istiyorsanız stroke veya kırpma zeminini renklendirmek istiyorsanız fill kullanın. fill kullandığınızda maskelenen şeklin görünen kısmı, kırpma şeklinin dolgusunun üstünde görülecektir. clip ile yapılan kırpmayı iptal etmek için save ile beraber restore yöntemini kullanın. clip İle İç Gölge Oluşturma clip yöntemi bir iç gölge oluşturmak için kullanılabilir. Bunu yapmak için kırpma şeklini belirledikten sonra tanımlanmış dolgu rengiyle tuvalin tamamını dodurun. Arkasından sadece blur özelliğine sahip bir gölge tanımlayıp kırpma şeklini kenarlıklı olarak aynı konuma yeniden çizin. Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />

<script>
function ciz() {

var tuval = document.getElementById("cnTuval");
var ctx = tuval.getContext("2d");

ctx.save();

ctx.fillStyle = "red";

// Bir yıldız şekli oluştur.
yildizOlustur(ctx);

// Şekli doldur.
ctx.fill();

// Aynı şekli kırpma alanı olarak belirle.
ctx.clip();

// Tüm tuvali doldur.
ctx.beginPath();
ctx.rect(0, 0, tuval.width, tuval.height);
ctx.fill();

// Sadece blur özelliğine sahip bir gölge oluştur.
ctx.shadowColor = 'black';
ctx.shadowBlur = 15;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 0;

// Yeni bir yıldız oluştur
yildizOlustur(ctx);

// Yıldıza kenarlık çiz.
ctx.stroke();

}

function yildizOlustur(ctx) {
// Bir yıldız çiz.
ctx.beginPath();
ctx.moveTo(100, 52);
ctx.lineTo(116, 84);
ctx.lineTo(150, 88);
ctx.lineTo(126, 114);
ctx.lineTo(130, 150);
ctx.lineTo(100, 132);
ctx.lineTo(70, 150);
ctx.lineTo(76, 114);
ctx.lineTo(50, 90);
ctx.lineTo(84, 84);
ctx.closePath();

}

ciz();

</script>
Çıktı şöyle olacaktır: Bu kadar. Bir eksik veya hata görürseniz lütfen bildirin. İlgili Makaleler HTML5 ve Flash üzerine HTML5 Canvas etiketi ile çizim Canvas etiketine düz çizgilerle çizim yapmak Canvas ile dörtgenler çizmek Canvas ile daire, çember, yay ve dilimler çizmek Canvas ile eğriler çizmek Canvas ile metin görüntüleme Canvas çizgi uçları ve çizgi birleşimleri Canvas çizimlerinde tuval durumunu saklama ve geri yükleme Canvas ile gölge efekti oluşturma Canvas ile tuval üzerine resim çizmek Canvas ile degrade / gradient (geçişli renk) dokuları oluşturma Canvas ile dönüşüm işlemleri 1: Tuvali kaydırma ve döndürme Canvas ile dönüşüm işlemleri 2: Ölçekleme Canvas ile dönüşüm işlemleri 3: Transform ile Dönüşüm Canvas ile resim dokusu oluşturma Canvas Clip Yöntemiyle Maskeleme  (Bu makale) Canvas globalAlpha Özelliği Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri

Canvas clip yöntemi, belirtilen bir yolu (çizgilerle oluşturulan bir çizim) kullanarak daha sonra oluşturulcak çizimler için bir pencere oluşturur. Sonradan yapılan çizimler, clip ile belirtilen şeklin içinden görünür. Dolayısıyla çizilen şekiller maskelenmiş olur. Kullanımı: ctx.clip(); Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); // clip'den önceki duruma dönebilmek için kapsam durumunu sakla. ctx.save(); // Bir yıldız çiz. ctx.beginPath(); ctx.moveTo(100, 52); ctx.lineTo(116, 84); ctx.lineTo(150, 88); ctx.lineTo(126, 114); ctx.lineTo(130, 150); ctx.lineTo(100, 132); ctx.lineTo(70, 150); ctx.lineTo(76, 114); ctx.lineTo(50, 90); ctx.lineTo(84, 84); ctx.closePath(); ctx.stroke(); // Kullanmak zorunlu değildir. fill de kullanabilirsiniz. // Çizilen şekli kırpma alanı (pencere) olarak belirle. ctx.clip(); // Kırmızı bir dörtgen çiz. ctx.fillStyle = "red"; ctx.fillRect(100, 100, 40, 40); // Kapsam durumunu geri yükle (clip işlemini bitir) ctx.restore(); } ciz(); </script> Çıktı şöyle olacaktır: Görüldüğü gibi yıldız çizildikten ve kırpma alanı olarak belirlendikten sonra yapılan çizimlerin şeklin içinde kalan kısımları görüntülenmektedir. fillRect ve strokeRect gibi yol (path) oluşturmayan ( beginPath ile başlamadığınız) şekiller kırpma alanı olarak kullanılamaz. fillText ve strokeText yöntemleri de bir işe yaramaz. Yani clip kullanarak bir metin maskesi elde edemezsiniz. Metin maskesi oluşturma işlemi için Canvas globalCompositeOperation Özelliği makalesine bakabilirsiniz. Eğer dörtgen bir kırpma alanı belirlemek istiyorsanız rect yöntemini kullanın. Örnekte de belirtildiği gibi kırpma alanı hazırlandıktan sonra stroke veya fill yöntemlerini kullanmak zorunda değilsiniz. Ancak kırpma alanının şeklini göstermek istiyorsanız stroke veya kırpma zeminini renklendirmek istiyorsanız fill kullanın. fill kullandığınızda maskelenen şeklin görünen kısmı, kırpma şeklinin dolgusunun üstünde görülecektir. clip ile yapılan kırpmayı iptal etmek için save ile beraber restore yöntemini kullanın. clip İle İç Gölge Oluşturma clip yöntemi bir iç gölge oluşturmak için kullanılabilir. Bunu yapmak için kırpma şeklini belirledikten sonra tanımlanmış dolgu rengiyle tuvalin tamamını dodurun. Arkasından sadece blur özelliğine sahip bir gölge tanımlayıp kırpma şeklini kenarlıklı olarak aynı konuma yeniden çizin. Örnek: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.save(); ctx.fillStyle = "red"; // Bir yıldız şekli oluştur. yildizOlustur(ctx); // Şekli doldur. ctx.fill(); // Aynı şekli kırpma alanı olarak belirle. ctx.clip(); // Tüm tuvali doldur. ctx.beginPath(); ctx.rect(0, 0, tuval.width, tuval.height); ctx.fill(); // Sadece blur özelliğine sahip bir gölge oluştur. ctx.shadowColor = 'black'; ctx.shadowBlur = 15; ctx.shadowOffsetX = 0; ctx.shadowOffsetY = 0; // Yeni bir yıldız oluştur yildizOlustur(ctx); // Yıldıza kenarlık çiz. ctx.stroke(); } function yildizOlustur(ctx) { // Bir yıldız çiz. ctx.beginPath(); ctx.moveTo(100, 52); ctx.lineTo(116, 84); ctx.lineTo(150, 88); ctx.lineTo(126, 114); ctx.lineTo(130, 150); ctx.lineTo(100, 132); ctx.lineTo(70, 150); ctx.lineTo(76, 114); ctx.lineTo(50, 90); ctx.lineTo(84, 84); ctx.closePath(); } ciz(); </script> Çıktı şöyle olacaktır: Bu kadar. Bir eksik veya hata görürseniz lütfen bildirin. Canvas üzerine çizim ile ilgili diğer makaleler için tıklayın.