Makale Geçmişi

Canvas etiketine yapılan çizimlerde kullanılan çizgilerin uçları ve birbirine bitişik olarak çizilen ya da closePath ile birleştirilen çizgilerde çizgilerin birleşim yerlerinin ne şekilde olacağı belirlenebilir. Bu işlemler için şu özellikler kullanılır: lineCap lineJoin miterLimit lineCap (Çizgi kapağı / şapkası) Özelliği: lineCap özelliği, çizgilerin uçlarının ne şekilde olacağını belirlemek için kullanılır. Bu özellik şu değerleri alabilir: butt square round Varsayılan butt değeridir. butt değeri çizgi ucunun belirtilen başlangıç konumundan başlayıp bitiş konumunda kesilmesi için kullanılır. square değeri kullanıldığında uca çizginin kalınlığı kadar bir kare yerleştirilir. Karenin yarısı çizginin içinde, yarısı ise çizginin dışında kalır. Sonuçta çizginin boyu çizginin kalınlığı kadar uzamış olur. round değerinde ise uca çizginin kalınlığı çapında bir daire eklenir. Yine karede olduğu gibi bu dairenin yarısı çizginin içinde kalır. Allttaki resimde sırasıyla butt , square ve round durumları gösterilmektedir. Mavi çizgiler, çizginin moveTo ve lineTo   ile verilen başlangıç ve bitiş konumlarını göstermektedir. Bu resmi oluşturan kod: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

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

// Sınırları göstermek için çizgilerin dikey
// başlangıç konumlarını gösteren bir çizgi çiz
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(50, 20);
ctx.lineTo(50, 180);
ctx.stroke();

// Çizgilerin dikey bitiş konumlarını gösteren bir çizgi çiz
ctx.beginPath();
ctx.moveTo(150, 20);
ctx.lineTo(150, 180);
ctx.stroke();

ctx.strokeStyle = "black";

ctx.lineWidth = 16;

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();

ctx.lineCap = "square";

ctx.beginPath();
ctx.moveTo(50, 90);
ctx.lineTo(150, 90);
ctx.stroke();

ctx.lineCap = "round";

ctx.beginPath();
ctx.moveTo(50, 130);
ctx.lineTo(150, 130);
ctx.stroke();


}
</script>
Örnekte butt özelliği varsayılan olduğundan ilk çizgi çizildiğinde lineCap özelliği kullanılmamıştır. lineJoin Özelliği: lineJoin özelliği, birleşen çizgilerin birleşim şeklinin nasıl olacağını belirler. Bu özellik şu değerleri alabilir: miter round bevel miter değeri varsayılan değerdir ve çizgi uçlarının sivri bir şekilde birleştirilmesini sağlar. round değeri kullanıldığında çizgi uçları yuvarlak oluşturacak şekilde birleştirilir. bevel değeri kullanıldığında ise çizgi uçları iki çizginin köşelerini birleştirecek şekilde bir hat ile birleştirilerek oluşturulur. Alltaki resim sırasıyla miter , round ve bevel değerleri ile yapılan uç birleşimlerini göstermektedir: Üstteki resmi oluşturan kod: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

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

ctx.lineWidth = 10;

ctx.lineJoin = "miter"; // Varsayılandır. İlk seferinde yazmasak da olur.
ctx.beginPath();
ctx.moveTo(10, 50);
ctx.lineTo(10, 100);
ctx.lineTo(50, 100);
ctx.closePath();
ctx.stroke();

ctx.lineJoin = "round";
ctx.beginPath();
ctx.moveTo(80, 50);
ctx.lineTo(80, 100);
ctx.lineTo(120, 100);
ctx.closePath();
ctx.stroke();

ctx.lineJoin = "bevel";
ctx.beginPath();
ctx.moveTo(150, 50);
ctx.lineTo(150, 100);
ctx.lineTo(190, 100);
ctx.closePath();
ctx.stroke();

}
</script>
miterLimit Özelliği: lineJoin değeri miter olduğunda, çizgiler birbirine dar bir açıyla yaklaşırsa uçlar çizgileri devam ettirerek birleştirildiğinden çok sivri olabilmektedir. miterLimit özelliği miter uçların boyunu sınırlamak için kullanılır. Bu değer çizgi kalınlığının yarısına göre belirlenen bir orandır . Varsayılan değeri 10'dur. Yani sivri ucun uzunluğu çizgilerin ilk birleştiği yerden itibaren en fazla çizgi kalınlığının yarısının 10 katını, diğer bir deyişle çizgi kalınlığının 5 katını geçmeyecektir. Eğer geçerse lineJoin özellik değeri bevel olarak ayarlanmış kabul edilecek ve çizgiler buna göre birleştirilecektir. Aşağıdaki şekilde dar bir açı oluşturan çizgilerin birleşimleri ve birleşimlerin miterLimit ile sınırlandırılmış durumları gösterilmektedir. Birinci birleşimde miterLimit değeri varsayılan değer yani 10'dur. Çizgiler uzatılarak birleştirildiğinde çizgilerin birleştikleri yer ile çizginin ucu arasındaki mesafe 10 * Çizgi kalınlığı / 2 değerini geçtiğinden çizgi ucu bevel olarak birleştirilmektedir. İkinci şekilde ise miterLimit 23'e ayarlanmış ve çizgi birleşimi tam olarak miter biçiminde görülmektedir. Eğer bu değeri 22 yaparsanız birleşim uzatılmaz. Görüntüyü oluşturan kod şöyledir: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red">
Tarayıcınız HTML5 desteklemiyor.
</canvas><br />
<input type="button" value="Çiz" onclick="ciz()" />
<script>
function ciz() {

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

// Üçgenlerin üst sınırını gösteren yatay mavi bir çizgi çiz
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.moveTo(0, 60);
ctx.lineTo(200, 60);
ctx.stroke();

ctx.strokeStyle = "black";
ctx.lineWidth = 6;
// ctx.lineJoin = "miter"; // Varsayılan olduğundan yazmaya gerek yok.
ctx.beginPath();
ctx.moveTo(15, 170);
ctx.lineTo(20, 60);
ctx.lineTo(25, 170);
ctx.closePath();
ctx.stroke();

// miterLimit özelliğini çizgi kalınlığının yarısının 23 katı olarak belirle.
ctx.miterLimit = 23;
ctx.beginPath();
ctx.moveTo(45, 170);
ctx.lineTo(50, 60);
ctx.lineTo(55, 170);
ctx.closePath();
ctx.stroke();

}
</script>
Bu kadar. Lütfen eksik veya hata görürseniz 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  (Bu makale) 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 Canvas globalAlpha Özelliği Canvas globalCompositeOperation Özelliği Canvas İle Piksel İşlemleri

Canvas etiketine yapılan çizimlerde kullanılan çizgilerin uçları ve birbirine bitişik olarak çizilen ya da closePath ile birleştirilen çizgilerde çizgilerin birleşim yerlerinin ne şekilde olacağı belirlenebilir. Bu işlemler için şu özellikler kullanılır: lineCap lineJoin miterLimit lineCap (Çizgi kapağı / şapkası) Özelliği: lineCap özelliği, çizgilerin uçlarının ne şekilde olacağını belirlemek için kullanılır. Bu özellik şu değerleri alabilir: butt square round Varsayılan butt değeridir. butt değeri çizgi ucunun belirtilen başlangıç konumundan başlayıp bitiş konumunda kesilmesi için kullanılır. square değeri kullanıldığında uca çizginin kalınlığı kadar bir kare yerleştirilir. Karenin yarısı çizginin içinde, yarısı ise çizginin dışında kalır. Sonuçta çizginin boyu çizginin kalınlığı kadar uzamış olur. round değerinde ise uca çizginin kalınlığı çapında bir daire eklenir. Yine karede olduğu gibi bu dairenin yarısı çizginin içinde kalır. Allttaki resimde sırasıyla butt , square ve round durumları gösterilmektedir. Mavi çizgiler, çizginin moveTo ve lineTo   ile verilen başlangıç ve bitiş konumlarını göstermektedir. Bu resmi oluşturan kod: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); // Sınırları göstermek için çizgilerin dikey // başlangıç konumlarını gösteren bir çizgi çiz ctx.strokeStyle = "blue"; ctx.beginPath(); ctx.moveTo(50, 20); ctx.lineTo(50, 180); ctx.stroke(); // Çizgilerin dikey bitiş konumlarını gösteren bir çizgi çiz ctx.beginPath(); ctx.moveTo(150, 20); ctx.lineTo(150, 180); ctx.stroke(); ctx.strokeStyle = "black"; ctx.lineWidth = 16; ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(150, 50); ctx.stroke(); ctx.lineCap = "square"; ctx.beginPath(); ctx.moveTo(50, 90); ctx.lineTo(150, 90); ctx.stroke(); ctx.lineCap = "round"; ctx.beginPath(); ctx.moveTo(50, 130); ctx.lineTo(150, 130); ctx.stroke(); } </script> Örnekte butt özelliği varsayılan olduğundan ilk çizgi çizildiğinde lineCap özelliği kullanılmamıştır. lineJoin Özelliği: lineJoin özelliği, birleşen çizgilerin birleşim şeklinin nasıl olacağını belirler. Bu özellik şu değerleri alabilir: miter round bevel miter değeri varsayılan değerdir ve çizgi uçlarının sivri bir şekilde birleştirilmesini sağlar. round değeri kullanıldığında çizgi uçları yuvarlak oluşturacak şekilde birleştirilir. bevel değeri kullanıldığında ise çizgi uçları iki çizginin köşelerini birleştirecek şekilde bir hat ile birleştirilerek oluşturulur. Alltaki resim sırasıyla miter , round ve bevel değerleri ile yapılan uç birleşimlerini göstermektedir: Üstteki resmi oluşturan kod: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); ctx.lineWidth = 10; ctx.lineJoin = "miter"; // Varsayılandır. İlk seferinde yazmasak da olur. ctx.beginPath(); ctx.moveTo(10, 50); ctx.lineTo(10, 100); ctx.lineTo(50, 100); ctx.closePath(); ctx.stroke(); ctx.lineJoin = "round"; ctx.beginPath(); ctx.moveTo(80, 50); ctx.lineTo(80, 100); ctx.lineTo(120, 100); ctx.closePath(); ctx.stroke(); ctx.lineJoin = "bevel"; ctx.beginPath(); ctx.moveTo(150, 50); ctx.lineTo(150, 100); ctx.lineTo(190, 100); ctx.closePath(); ctx.stroke(); } </script> miterLimit Özelliği: lineJoin değeri miter olduğunda, çizgiler birbirine dar bir açıyla yaklaşırsa uçlar çizgileri devam ettirerek birleştirildiğinden çok sivri olabilmektedir. miterLimit özelliği miter uçların boyunu sınırlamak için kullanılır. Bu değer çizgi kalınlığının yarısına göre belirlenen bir orandır . Varsayılan değeri 10'dur. Yani sivri ucun uzunluğu çizgilerin ilk birleştiği yerden itibaren en fazla çizgi kalınlığının yarısının 10 katını, diğer bir deyişle çizgi kalınlığının 5 katını geçmeyecektir. Eğer geçerse lineJoin özellik değeri bevel olarak ayarlanmış kabul edilecek ve çizgiler buna göre birleştirilecektir. Aşağıdaki şekilde dar bir açı oluşturan çizgilerin birleşimleri ve birleşimlerin miterLimit ile sınırlandırılmış durumları gösterilmektedir. Birinci birleşimde miterLimit değeri varsayılan değer yani 10'dur. Çizgiler uzatılarak birleştirildiğinde çizgilerin birleştikleri yer ile çizginin ucu arasındaki mesafe 10 * Çizgi kalınlığı / 2 değerini geçtiğinden çizgi ucu bevel olarak birleştirilmektedir. İkinci şekilde ise miterLimit 23'e ayarlanmış ve çizgi birleşimi tam olarak miter biçiminde görülmektedir. Eğer bu değeri 22 yaparsanız birleşim uzatılmaz. Görüntüyü oluşturan kod şöyledir: <canvas id="cnTuval" width="200" height="200" style="border:solid 1px red"> Tarayıcınız HTML5 desteklemiyor. </canvas><br /> <input type="button" value="Çiz" onclick="ciz()" /> <script> function ciz() { var tuval = document.getElementById("cnTuval"); var ctx = tuval.getContext("2d"); // Üçgenlerin üst sınırını gösteren yatay mavi bir çizgi çiz ctx.strokeStyle = "blue"; ctx.beginPath(); ctx.moveTo(0, 60); ctx.lineTo(200, 60); ctx.stroke(); ctx.strokeStyle = "black"; ctx.lineWidth = 6; // ctx.lineJoin = "miter"; // Varsayılan olduğundan yazmaya gerek yok. ctx.beginPath(); ctx.moveTo(15, 170); ctx.lineTo(20, 60); ctx.lineTo(25, 170); ctx.closePath(); ctx.stroke(); // miterLimit özelliğini çizgi kalınlığının yarısının 23 katı olarak belirle. ctx.miterLimit = 23; ctx.beginPath(); ctx.moveTo(45, 170); ctx.lineTo(50, 60); ctx.lineTo(55, 170); ctx.closePath(); ctx.stroke(); } </script> Bu kadar. Lütfen eksik veya hata görürseniz bildirin. Canvas üzerine çizim ile ilgili diğer makaleler için tıklayın.