Bir HTML5 Canvas çizgi birleştirme stilini ayarlamak için lineJoin özelliğini ayarlayabiliriz. Yollar üç çizgi bağlantısından birine sahip olabilir: miter, round, yada bevel. Aksi belirtilmedikçe, HTML5 Canvas çizgisi birleştirme özelliği miter stiliyle varsayılan olarak ayarlanmıştır.
Not: Çizgileriniz oldukça ince ise ve dik açılarla birleştirmiyorsanız, farklı çizgi birleşimlerini ayırt etmek zor olabilir.
Çıktı:
Kod:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // birleştirme şekillerini görmek için çizgi kalınlığını arttırın. context.lineWidth = 25; // miter soldaki context.beginPath(); context.moveTo(99, 150); context.lineTo(149, 50); context.lineTo(199, 150); context.lineJoin = 'miter'; context.stroke(); // round ortadaki context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 50); context.lineTo(339, 150); context.lineJoin = 'round'; context.stroke(); // bevel sağdaki context.beginPath(); context.moveTo(379, 150); context.lineTo(429, 50); context.lineTo(479, 150); context.lineJoin = 'bevel'; context.stroke(); </script> |
Add comment