HTML5 Canvas kullanarak yuvarlatılmış köşeler oluşturmak için, bir kontrol noktası, bir bitiş noktası ve bir yarıçap tarafından tanımlanan arcTo() yöntemini kullanabiliriz. Çizgilerin birleşme noktalarını ovalleştirmek çizgi birleştirme yazısına bakabilirsiniz.
Çıktı:
Kod:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var koseGenislik = 200; var koseYukseklik = 100; var koseX = 189; var koseY = 50; var koseOval = 70; context.beginPath(); context.moveTo(koseX, koseY); context.lineTo(koseX + koseGenislik - koseOval, koseY); context.arcTo(koseX + koseGenislik, koseY, koseX + koseGenislik, koseY + koseOval, koseOval); context.lineTo(koseX + koseGenislik, koseY + koseYukseklik); context.lineWidth = 5; context.stroke(); </script> |
Yorum Yap