HTML5 Canvas ile ikinci dereceden bir eğri oluşturmak için quadraticCurveTo() yöntemini kullanabiliriz. Kuadratik eğriler bağlam noktası, kontrol noktası ve bitiş noktası ile tanımlanır. Kuadratik eğriler, lineWidth, strokeStyle ve lineCap özellikleriyle stillenebilir.
Çı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 | <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> </head> <body> <canvas id="canvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.beginPath(); context.moveTo(188, 150); context.quadraticCurveTo(288, 0, 388, 150); context.lineWidth = 10; // line color context.strokeStyle = 'black'; context.stroke(); </script> </body> </html> |
Yorum Yap