HTML5 - Gelişmiş Kanvas

Öğeyi kullanırken tuval çizmek için dikdörtgen şekiller çizmekle sınırlı değiliz, koordinatları kullanarak da çizebiliriz ve sözde yollar elemanı belirteceğimiz yollar hangileridir tuval çizimimizi nerede ve nasıl göstereceğiz.
Bunun bize sağladığı olanaklar etkileyici, çünkü gerekli algoritmalarla sınırsız kompozisyonlar yapabiliriz, her türlü figürü çizebiliriz. HTML5 ve onunla birlikte, diğer unsurlarla birlikte, dilin önceki spesifikasyonlarında asla hayal edilmemiş sonuçlara ulaşana kadar.
Yolu Kullanma
Bahsettiğimiz gibi yol tuvale çizimin yapılması gereken koordinatları belirtmemize izin verecek olan şeydir, bu koordinatlarla tuval karşılık gelen çizgilerin nereye çizileceğini bilebilecek ve sonunda doğru çizgi birikimi ile herhangi bir şeyi başarabiliriz. figür türü.
İlgili örneklere geçmeden önce canvas öğesi ve path için hangi yöntemlerin mevcut olduğunu bilmeliyiz, aşağıdaki listeye bakalım:

• startPath(): Bu yöntem yeni bir yol başlatmamızı sağlar.
• closePath(): Bu yöntem, son satırın sonundan başlangıç ​​koordinatlarına bir çizgi çizerek mevcut yolu kapatmaya çalışır.
• doldurmak (): Alt yollar tarafından açıklanan formları doldurun.
• isPointInPath (x, y): Belirtilen nokta geçerli yol tarafından çizilen şeklin içindeyse true değerini döndürür.
• lineTo (x, y): Belirtilen koordinatlarda bir alt yol çizin.
• MoveTo (x, y): Alt yol çizmeye gerek kalmadan belirtilen koordinatlara hareket etmemizi sağlar.
• doğru (x, y, w, h): Sol üst köşedeki koordinatları (x, y), genişliği w'ye ve yüksekliği h'ye karşılık gelen bir dikdörtgen çizin.
• inme (): Alt yolun çizdiği şekillerin dış çizgilerini çizin.

Tuvali kullanmak için hangi araçları kullanmamız gerektiğini öğrendikten sonra, bir çizim oluşturabileceğimiz akışın sırasını bilmeliyiz, bu sıra aşağıdaki gibidir:
• Yöntemi çağırıyoruz startPath.
• Yöntemi kullanarak ilk pozisyona geçiyoruz. taşınmak.
• Yöntemlerle alt yolları çiziyoruz lineTo, vb.
• İsteğe bağlı olarak metodu çağırabiliriz. kapatYol.
• Sonunda yöntemleri çağırıyoruz doldurmak veya ateş etmek.
Çizime başlamak için önerilen sıraya zaten sahibiz, şimdi ilgili kodu şurada görüyoruz. HTML5.

 Örnek Tarayıcınız öğeyi desteklemiyor tuval 

Gördüğümüz gibi, iki çağrı yapılır. startPath(), bununla tuval üzerindeki çizim alanlarını başlatabiliriz, ardından moveTo () ile ilk konumları belirleriz ve gerisi çizmektir.
Bakalım çizimimiz tarayıcıda nasıl görünüyor:

Bununla, yalnızca kullanabileceğimiz farklı yöntemleri ve ek araçları bilmekle kalmayıp, bunların artık yalnızca çizebileceğimiz dikdörtgen şekiller olmadığını vurgulayarak öğreticiyi bitiriyoruz.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.