İçindekiler
Resimde görülen farklı çizim yöntemleri ile tuval İçlerinde çizilecek alanları tanımlamak mümkündür, bu biraz daha karmaşık olsa da tamamen uygulanabilir, ancak aynı sonucu klip () yöntemini kullanarak da elde etme imkanımız var.Aynı zamanda dahil edilebilecek başka bir yönü tuval metin çizimidir, belki CSS ve diğer öğeleri kullanarak, aynı veya daha iyi görünen bir metin çizebileceğimizi düşünüyoruz. tuval yerel animasyonları uygulamamıza olanak tanır HTML5.
Klip yöntemi
Başta da belirttiğimiz gibi bu yöntem, tuval içinde nasıl bölüm oluşturabiliriz, yeni bir çizim gibi diğer çizilmiş öğeleri tanıtabilmek veya belirli bir renkle doldurabilmek için.
Bu aracı kullanmak için yöntemi çağırmalıyız klips (), bu yöntemin yaptığı bir bölge oluşturmaktır. kırpma veya yeni bir bölüm, aşağıdaki kodda nasıl çalıştığını görelim:
Örnek Tarayıcınız öğeyi desteklemiyor tuval Bu kodda önce sarı renkte büyük bir dikdörtgen çiziyoruz, ardından içinde yeni bir bölge oluşturuyoruz. klip () yöntemi ve bu bölge içinde yeni bir kırmızı dikdörtgen oluşturuyoruz.
Bunun tarayıcımızda nasıl göründüğüne bakalım:
Ayrıca bir tuval içinde metin çizebiliriz, bunun için aşağıdaki yöntemlerimiz var:
fillText (, x, y, genişlik): İlk parametrede belirtilen metni çizer ve doldurur (x, y) konumunda. Ayrıca onun argümanı Genişlik isteğe bağlıdır, ancak bildirildiğinde metnin genişliğine bir sınır koyar.
konturText (, x, y, genişlik): (x, y) konumunda dolgu yapmadan metni çizer ve bırakır. İsteğe bağlı argümanındaki önceki yöntem gibi, metnin genişliğini sınırlar.
Tuvalimize metin çizmek için bu yöntemlerin nasıl kullanılacağına dair aşağıdaki örneği görelim:
Örnek Tarayıcınız öğeyi desteklemiyor tuval Bu kodda, aynı metni hem aynı konumda hem de farklı bir renkle çizmek için her iki yöntemi de kullanıyoruz, bununla bir rengin dış çerçevesinin etkisini ve başka bir rengin dolgusunu elde ediyoruz, bununla daha fazlasını oluşturabiliriz. arasında belirgin fark fillText Y konturMetin.
Son olarak ve bu öğreticiyi bitirmek için tarayıcıda nasıl göründüğüne bakalım.
