Lienzo HTML5 y ancho de línea

Question

Estoy dibujando gráficos de líneas en un lienzo. Las líneas dibujan bien. El gráfico se escala, cada segmento se dibuja, el color está bien, etc. Mi único problema es visualmente que el ancho de línea varía. Es casi como la punta de un bolígrafo de caligrafía. Si el trazo es hacia arriba, la línea es delgada, si el trazo es horizontal, la línea es más gruesa.

Mi grosor de línea es constante, y mi strokeStyle se establece en black. No veo ninguna otra propiedad del lienzo que afecte a un ancho de línea tan variable, pero debe haberlo.

Answer 1

Pruebe lineCap = "round" y lineJoin = "round". Consulte "Estilos de línea" en this PDF para ver qué hacen estos parámetros.

---

Edición 17-julio-2015: Gran hoja de trucos, pero el vínculo está muerto. Por lo que puedo decir, hay una copia al http://www.cheat-sheets.org/saved-copy/HTML5_Canvas_Cheat_Sheet.pdf.

Answer 2

Live Demo

Mi demostración en vivo, básicamente, sólo recrea lo que dice el MDN. Para incluso el ancho de trazo puede usar enteros para coordenadas, para anchos de trazos impares que desea usar .5 para obtener líneas nítidas que llenen los píxeles correctamente.

De MDN Article

Si se tiene en cuenta un camino a partir de (3,1) a (3,5) con un grosor de línea de 1.0, se termina con la situación en el segunda imagen. El área real que se va a rellenar (azul oscuro) solo se extiende hasta la mitad de los píxeles en a ambos lados de la ruta. Se debe representar una aproximación de esto, , lo que significa que esos píxeles están parcialmente sombreados, y los resultados en toda el área (azul claro y azul oscuro) rellenando con un color solo la mitad de oscuro que el trazo real color. Esto es lo que ocurre con con la línea de ancho 1.0 en el código de ejemplo anterior.

Para solucionar esto, debe ser muy preciso en la creación de su ruta. Sabiendo que una línea de ancho 1.0 ampliará la mitad de una unidad a cualquiera de los lados de la ruta, crear la ruta desde (3.5,1) a (3.5,5) da como resultado la situación en la tercera imagen; el ancho de línea 1.0 termina hasta completamente y llenando con precisión una línea vertical de un solo píxel.

Answer 3

Acabo de resolver un problema de naturaleza similar. Implicaba un error en un bucle For.

PROBLEMA: Creé un bucle for para crear una serie de segmentos de línea conectados y noté que la línea era gruesa para empezar pero se adelgazaba significativamente en el segmento final (no se usaron degradados explícitamente).

PRIMERO, PÁRAMO MUERTO: Al principio supuse que era el problema de píxeles anterior, pero el problema persistía incluso después de forzar a todos los segmentos a permanecer en un nivel constante.

OBSERVACIÓN: Noté que cometí un error de novato: solo usé un solo "ctx.beginPath()" y "ctx.moveTo (posX, posY)" ANTES del ciclo For y un solo "ctx".stroke() "DESPUÉS de que el bucle For y el bucle envuelvan un solo ctx.lineTo().

SOLUCIÓN: Una vez que moví todos los métodos (.beginPath(), .moveTo(), .lineTo() y .stroke()) juntos en el bucle For para que todos sean golpeados en cada iteración, el problema desapareció Mi línea conectada tenía el grosor uniforme deseado

Answer 4

Si el ancho de línea es un número impar, simplemente agregue 0.5 a xo y