HTML5 Kanvas ve Çizgi Genişliği

Question

Bir tuvale çizgi grafikler çiziyorum. Çizgiler iyi çiziyor. Grafik ölçeklendirilir, her segment çizilir, renk iyidir, vs. Tek sorunum görsel olarak çizgi genişliği değişir. Neredeyse bir kaligrafi kaleminin ucu gibi. İnme yukarı doğru ise çizgi ince, strok yatay ise çizgi daha kalın olur.

Hat kalınlığım sabit ve strokeStyle benim black olarak ayarlanmış. Tuvalin böyle bir çizgi genişliğini etkileyen başka özellikleri görmüyorum ama olması gerekiyor.

Answer 1

lineCap = "round" ve lineJoin = "round"'u deneyin. Bu parametrelerin ne yaptığını görmek için this PDF'de "Çizgi Stilleri" konusuna bakın.

---

Düzenleme 17-Temmuz-2015: Büyük kısa notlara, ancak bağlantı öldü. Anlayabildiğim kadarıyla, http://www.cheat-sheets.org/saved-copy/HTML5_Canvas_Cheat_Sheet.pdf numaralı telefondan bir kopyası var.

Answer 2

Live Demo

Benim canlı demo temelde sadece MDN ne diyor yeniden oluşturur. Eşit vuruşlar için, pikselleri doğru şekilde dolduran net çizgiler elde etmek için .5 kullanmak istediğiniz tek strok genişlikleri için koordinatlar için tamsayılar kullanabilirsiniz. Eğer 1.0 çizgi kalınlığı da (3,5) ila (3,1) dan bir yol düşünün MDN Article

itibaren

, içeri durumla sona ikinci görüntü Doldurulacak olan gerçek alanı (koyu mavi), yolun her iki tarafındaki üzerindeki piksellerin yarısına kadar uzanır. Bunun bir yaklaşımı, , yani bu piksellerin sadece kısmen gölgeli olduğu ve tüm alandaki sonuçlarının (açık mavi ve koyu mavi) ile gerçek strokun yalnızca yarısı kadar karanlık bir renkte doldurulduğu anlamına gelir. renk. Bu, 'un önceki örnek koddaki 1.0 genişlik çizgisiyle gerçekleşmesidir.

Bunu düzeltmek için, yol oluşturma işleminizde çok hassas olmanız gerekir. 1.0 genişlikli bir çizginin, bir resmin yarısını her iki tarafa da genişleteceğini bilerek, yolun (3.5,1) ila (3.5,5) arasında bir yol yaratması, üçüncü görüntüdeki durumunun sonucudur - 1.0 satır genişliği sona erer tamamen yukarı ve tek bir piksel dikey çizgiyi tam olarak doldurma.

Answer 3

Sadece benzer nitelikteki bir sorunu çözdüm. Bir For döngüsünde bir hata içeriyordu.

SORUN: Bir dizi bağlı satır segmenti oluşturmak için bir döngü oluşturmuş ve çizginin başlayacak kadar kalın olduğunu, ancak son segmentte önemli ölçüde incelendiğini fark etmiştim (hiçbir eğim açıkça kullanılmadı).

FIRST, DEAD END THOUGHT: İlk başta, yukarıdaki piksel sorunu olduğunu varsaydım, ancak sorun, tüm segmentleri sabit bir seviyede kalmaya zorladıktan sonra bile devam etti.

GÖZLEMLEME: Bir yeni kullanıcının hatasını yaptığımı fark ettim - Yalnızca tek bir "ctx.beginPath()" ve "ctx.moveTo (posX, posY)" Ön döngüsünü ve tek bir "ctx" ifadesini kullandım.stroke() "For döngüsünden sonra ve döngü kendisi tek bir ctx.lineTo().

ÇÖZÜM: Tüm yöntemleri (.beginPath(), .moveTo(), .lineTo() ve .stroke()) For döngüsüne, hepsi de her bir yinelemeye çarptılar, sorun ortadan kalktı. Bağlantımdaki çizgim istenen düzgün kalınlığa sahipti.

Answer 4

Eğer linewidth tek bir sayı ise, sadece 0,5 ila x veya y