Estaba jugueteando con HTML Canvas en un contexto 2D y me di cuenta de que al renderizar líneas, no siempre se renderizan de la misma manera. Tengo un ejemplo mínimo de "somehwat" a continuación. Básicamente, ambas rutas se representan con el mismo estilo de trazo y ancho de línea utilizando las primitivas moveTo y lineTo . Sin embargo, la línea inferior del hexágono y la superior del triángulo se ven diferentes ( como se muestra en esta captura de pantalla ).
Aumentar el ancho de línea parece solucionarlo. Pero quiero líneas nítidas pero delgadas, por lo que después de aumentar posteriormente el tamaño del lienzo a un múltiplo de lo que se representa en la página tampoco soluciona esto (por ejemplo, establezca el ancho de línea en 4, el tamaño del lienzo en 1600x1600 y el tamaño del estilo del elemento del lienzo a 400px por 400px).
¿Cuál es la causa de este comportamiento, o cómo se llama esto? Pensé que podría ser suavizado, pero ¿por qué eso no afecta a ambas líneas de la misma manera?
Una vez que sepa por qué sucede esto, puedo comenzar buscando una solución, pero por ahora ni siquiera sé qué buscar :--).
<html> <head> <title>The Fuck</title> </head> <body> </body> <script> let canvas = document.createElement("canvas"); let context = canvas.getContext("2d"); document.body.appendChild(canvas); canvas.width = 400; canvas.height = 400; canvas.style.height = canvas.width + "px"; canvas.style.width = canvas.height + "px"; let lineWeight = 1; let strokeStyle = "black"; let n = 6; let r = canvas.width / 4; let cx = canvas.width / 2; let cy = canvas.height / 2; let x = cx + r * Math.cos(0); let y = cy + r * Math.sin(0); context.save(); context.strokeStyle = strokeStyle; context.lineWidth = lineWeight; context.moveTo(x, y); for (let i = Math.PI * 2 / n; i < Math.PI * 2; i += Math.PI * 2 / n) { x = cx + r * Math.cos(i); y = cy + r * Math.sin(i); context.lineTo(x, y); } context.closePath(); context.stroke(); context.restore(); context.save(); context.strokeStyle = strokeStyle; context.lineWidth = lineWeight; context.moveTo(canvas.width / 4, canvas.height * 3 / 4); context.lineTo(canvas.width * 3 / 4, canvas.height * 3 / 4); context.lineTo(canvas.width / 2, canvas.height * 7 / 8); context.closePath(); context.stroke(); context.restore(); </script> </html>