✅ HTML5 - Tuval Üzerine Çizim

İçindekiler

Güçlü yapılara sahip olmanın anahtarı temellerdir, bunun için güçlü ve iyi tanımlanmış temellere sahip olmalıyız, bu nedenle elemanı maksimum kapasitede kullanabilmek için Tuval Öncelikle temel yönleri derinlemesine bilmeliyiz ve bu nedenle temel şekilleri çizmeye başlayacağız, bununla farklı çizim yöntemlerinin nasıl çalıştığını öğreneceğiz ve daha sonra daha karmaşık kompozisyonlar yapabiliriz.
bir dikdörtgen çiz
Dikdörtgen 4 kenardan oluşan çok basit bir şekil, tuval üzerine çizebilmek için elimizdeki yöntemlere bakalım:

clearRect (x, y, w, h): Bir dikdörtgeni veya önceden belirlenmiş bir dikdörtgenin bir bölümünü temizler.
fillRect (x, y, w, h): Dolu bir dikdörtgen çizmek için kullanılır.
inmeRect (x, y, w, h): Dolgusuz bir dikdörtgen çizmek için kullanılır.

Fark edeceğimiz gibi, önceki yöntemlerin tümü 4 argüman kullanır, bu argümanlar aşağıdakilere karşılık gelir:

x ve dikdörtgenin sol üst kenarının sınırlarıdır.
NS sırasıyla genişlik ve yüksekliğe karşılık gelir.

Bu unsurları uygulamaya koyabilmemiz için basit bir örnek görelim:

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

Bu örnekte, bazı değişkenleri tanımladığımızı görüyoruz, burada telafi etmek veya dikdörtgenlerin nerede başlayacağını sınırlayın, boyutu ve ardından tekrarları yapmak için bir sayaç görevi görecek bir var sayımı, bu yüzden bir sonraki bölümde dikdörtgenleri dinamik olarak yapacağımızı biliyoruz, bakalım nasıl çizildiklerine bakalım. tarayıcı:

Metot olarak adlandırdığımız koda bakarsak, her biri 5 dikdörtgenden oluşan iki sıra yaptık. doldurRect () önce doldurulmuş dikdörtgenler için ve sonra vuruşDoğru dolmayanlar için.
clearRect() yöntemini kullanma
Şimdi içi doldurulmuş dikdörtgenlerin bir kısmını temizlemek istersek ne olur? Bunun için yöntemimiz var temizleDüz (), aşağıdaki kodda nasıl çalıştığını göreceğiz:

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

Her tekrar için yönteme bir çağrı uygularız temizleDüz () ve yaptığımız algoritmayı yaparken içi dolu dikdörtgenlerin tam ortasından geçmesini sağlayalım, aşağıdaki resimde tarayıcımızda nasıl göründüğünü görelim:

Burada daha önce çizdiğimiz bir alanı nasıl temizlediğimizi görebiliriz.
Bununla, elementimizde çizmek için kullanabileceğimiz bazı yöntemleri biraz daha derinlemesine görebildiğimiz bu öğreticiyi bitiriyoruz. Tuval.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.