İçindekiler
Temel olarak tüm şekiller çizgilerden ve eğrilerden oluşur, çoğu durumda çok kısa çizgiler ve çok sayıda eğriler kullanarak eğrileri simüle edebiliriz, ancak bu çok karmaşıktır ve istisnai bir çalışma gerektirir, HTML5 ve pratikliği bize ark yöntemi Bununla kavisli çizgiler geliştirebiliriz ve bir şekilde çizimlerimizi tamamlayabiliriz.ark yöntemi
Başta da belirttiğimiz gibi bu yöntem eleman içinde eğri çizgiler oluşturmamızı sağlar. tuval daha fazla karmaşıklık olmadan, bazı programlama dillerinde yapılması gerekebilecek karmaşık matematiksel formülleri tanıtmaya gerek kalmadan.
Bu yöntemin nasıl çalıştığını görmeden önce özelliklerini ve özelliklerini bilmeliyiz, bunları aşağıdaki listede göreceğiz:
- yay (x, y, rad, başlangıç açısı, bitiş, yön): Bu yöntem (x, y) koordinatlarında yarıçaplı bir eğri çizer. rad, başlangıç açısı başlangıç açısı ve açının sonu açıFinal. İsteğe bağlı bir parametremiz var. adres ve yöntemin çizdiği eğrinin alacağı yönü belirtir.
- arkTo (x1, y1, x2, y2, rad): Bu yöntem, (x1, y1) koordinatlarını geçen ve yarıçapı olan (x2, y2) koordinatlarına bir eğri çizmemizi sağlar. rad.
Gördüğümüz gibi, elimizdeki eğri çizgileri çizebilmemiz için gereken her şeyi bize sağlayan iki temel yöntemimiz var. tuval öğesi, şimdi az önce gördüklerimizi nasıl uygulamaya koyacağımızı gösterebilmemiz için küçük bir kod görelim:
Örnek Tarayıcınız aşağıdakileri desteklemiyor: tuval eleman Örnekte eğri çizgiyi yöntemi kullanarak yaptık. arkTo () daha önce tanımladığımız, bu eğriyi çizmek için iki çizgiye bağlıyız, ilki son alt yolun sonundan ilk iki yöntem argümanı tarafından açıklanan noktaya çizilir ve ikinci çizgi tarafından açıklanan noktadan çizilir. üçüncü ve dördüncü argümanlar tarafından açıklanan noktaya ilk iki argüman.
Son olarak eğri, son alt-yol ile yarıçapı son argüman tarafından belirtilen bir dairenin eğrisini tanımlayan ikinci nokta arasındaki en kısa çizgi olarak çizilir, böylece ne demek istediğimizi görebiliriz, kod bazı satırları içerir. referans kırmızı. Aşağıda bunun tarayıcımızda nasıl göründüğüne dair bir resim görelim:
