HTML5 Canvas e lo spessore

Question

sto disegnando grafici lineari su una tela. Le linee si disegnano bene. Il grafico è ridimensionato, ogni segmento è disegnato, il colore è ok, ecc. Il mio unico problema è visivamente che la larghezza della linea varia. È quasi come il pennino di una penna per calligrafia. Se il tratto è verso l'alto la linea è sottile, se il tratto è orizzontale, la linea è più spessa.

Lo spessore della linea è costante e il mio strokeStyle è impostato su black. Non vedo altre proprietà della tela che influiscano su una larghezza di linea così variabile, ma deve esserci.

Answer 1

Prova lineCap = "round" e lineJoin = "round". Vedi "Stili di linea" nel PDF this per vedere cosa fanno questi parametri.

---

Modifica 17-Luglio-2015: Grande foglietto, ma il collegamento è morto. Per quanto ne so, ce ne è una copia al http://www.cheat-sheets.org/saved-copy/HTML5_Canvas_Cheat_Sheet.pdf.

Answer 2

Live Demo

mio demo live fondamentalmente solo ricrea ciò che dice il MDN. Per le larghezze di tratto pari puoi usare numeri interi per le coordinate, per le larghezze di tratti dispari che vuoi usare .5 per ottenere linee nitide che riempiano correttamente i pixel.

Da MDN Article

Se si considera un percorso da (3,1) a (3,5) con uno spessore di linea di 1.0, si finisce con la situazione in seconda immagine. L'attuale zona da riempire (blu scuro) si estende solo a metà nei pixel su entrambi i lati del percorso. Un'approssimazione di questo deve essere reso, che significa che i pixel di essere solo parzialmente ombreggiati, e risultati nell'intera area (la luce blu e blu scuro) essendo riempita con un colore solo la metà buia come la corsa effettiva colore. Questo è ciò che si verifica con la riga di larghezza 1.0 nel codice di esempio precedente.

Per risolvere questo problema, è necessario essere molto precisi nella vostra creazione percorso. Sapendo che una linea larghezza 1,0 estenderà mezza unità per ciascun lato del percorso, creando il percorso da (3.5,1) a (3.5,5) determina la situazione nella terza immagine - la larghezza 1.0 linea termina completamente e riempiendo precisamente una linea verticale a pixel singolo.

Answer 3

Ho appena risolto un problema di natura simile. Ha coinvolto un bug in un ciclo For.

PROBLEMA: avevo creato un ciclo for per creare una serie di segmenti di linea collegati e ho notato che la linea era spessa per iniziare, ma assottigliato in modo significativo il segmento finale (sfumature non sono stati utilizzati in modo esplicito).

PRIMO, PENSIERO FONDO: All'inizio ho pensato che fosse il problema dei pixel sopra, ma il problema persisteva anche dopo aver costretto tutti i segmenti a rimanere a un livello costante.

OSSERVAZIONE: ho notato che ho commesso l'errore di un novizio - ho usato solo un singolo "ctx.beginPath()" e "ctx.moveTo (posX, posY)" PRIMA del ciclo For e un singolo "ctx".stroke() "DOPO il ciclo For e il ciclo stesso ha avvolto un singolo ctx.lineTo().

SOLUZIONE: Dopo aver spostato tutti i metodi (.beginPath(), .moveTo(), .lineTo() e .stroke()) insieme nel ciclo For in modo che venissero tutti colpiti a ogni iterazione, il problema è andato via La mia linea connessa aveva lo spessore uniforme desiderato

Answer 4

Se la larghezza di riga è un numero dispari, basta aggiungere 0,5 a x o y