Quando creiamo un elemento canvas HTML5, un margine fantasma appare sotto l'elemento canvas, anche se abbiamo impostato il margine e padding a 0.Elimina il margine fantasma sotto l'elemento canvas HTML5?
Esempio: http://jsfiddle.net/yvbmd/
Abbiamo provato una varietà di cose, ma può' t cancella il margine fantasma.
Come possiamo creare l'elemento canvas senza quel margine fantasma?
Aggiungere vertical-align: bottom ad esso.
Ciò è causato dal fatto che la tela è un elemento in linea. Come tale, è effettivamente considerato un personaggio. Come tale, deve seguire la regola di base, che è di lasciare un po 'di spazio sotto la linea in caso di caratteri come gjpqy che scendono sotto la linea di base. Impostando vertical-align su bottom, si sta effettivamente allineando l'area di disegno alla fine delle lettere a discesa. Finché la tela stessa è più alta della line-height, non avrai problemi. Se la tela è più corta della line-height, inizierai a vedere "margini fantasma" sopra la tela poiché riserva spazio per bdfhklt, le lettere più alte. Questo può essere risolto aggiungendo una regola line-height: 1px.
Grazie, Kolink! A causa delle tue intuizioni, abbiamo risolto questo problema rendendo l'elemento canvas un elemento di blocco con "display: block". Vedi qualche problema con questa soluzione? – Crashalot
Bene, è una ** soluzione **. Dipende da cosa stai usando la tela, davvero. –
vertical-align: bottom; blocco di visualizzazione; ha funzionato nel mio caso. – Houman