0
248
Vistas¿Por qué las líneas se vuelven menos opacas en el borde de mi lienzo HTML5?
Estoy en el proceso de crear un gráfico de barras en un lienzo HTML5. Es solo un montón de líneas creadas con .moveTo() , .lineTo() y .stroke() . El código está abajo.
Soy relativamente nuevo en canvas, pero parece que la tarea es simple. Como prototipo, estoy dibujando líneas de longitud aleatoria en el lienzo para dar una idea de cómo se verá finalmente el gráfico de barras en la página terminada.
El problema es que las líneas se están volviendo notablemente menos opacas en el extremo derecho del lienzo.
Probé lo mismo en Firefox y Edge (basado en Chromium) y el efecto es siempre el mismo. Cambié el condicional en el bucle for para dibujar menos líneas. Aún así, el último puñado es menos opaco que el resto.
Para asegurarme de que no era mi monitor o mis ojos jugando una mala pasada, tomé una captura de pantalla y usé la herramienta cuentagotas en GIMP para obtener los valores de color. Va desde #0000FF, que es lo que quiero, hasta #1010FF, #2020FF y finalmente #7F7FFF en el extremo derecho del gráfico.
¿Alguien puede explicar por qué sucede esto y qué puedo hacer para corregirlo?
Parece como si fuera una especie de efecto de "desvanecimiento" en el lienzo que debería ocurrir en todos los bordes y no solo hacia el lado derecho.
Aquí hay una imagen que muestra el efecto:
<!DOCTYPE html> <html> <head> <title>Bar Graph</title> <script> function draw() { inverterOutputCanvas = document.getElementById('inverter-output').getContext('2d'); inverterOutputCanvas.strokeStyle = '#0000FF'; for (let i=0; i<730; i+=5) { inverterOutputCanvas.moveTo(i+2, 100); inverterOutputCanvas.lineTo(i+2, Math.floor(Math.random()*100)); inverterOutputCanvas.stroke(); } } </script> </head> <body onload="draw();"> <canvas id="inverter-output" width="730" height="100" style="border: 1px solid lightgray;"></canvas> </body> </html>1 Respuestas
Responde la pregunta0
La respuesta de por qué las últimas barras en el gráfico se estaban desvaneciendo gradualmente se debe a que no .beginPath() y .closePath() . Creo que sin esto, lo que pensaba que estaba dibujando como líneas individuales en realidad se trataba como pequeños segmentos de una gran línea. Cuando agregué .beginPath() y .closePath() dentro de mi bucle for, obtuve un color uniforme de izquierda a derecha.
Sin embargo, era considerablemente menos opaco de lo que esperaba.
Creo que la falta de opacidad se debe quizás a las funciones de suavizado. Parece consistente con el desvanecimiento en el color de fondo que presencié. Una vez que engrosé las líneas con inverterOutputCanvas.lineWidth = 3; todo comenzó a parecerse más a lo que había esperado en primer lugar.
El código actualizado está debajo.
Los puntos clave son: siempre use .beginPath() y .closePath() para cada línea en el gráfico y use una línea más gruesa para que se destaque más.
Aquí está el gráfico de barras mejorado:
<!DOCTYPE html> <html> <head> <title>Bar Graph</title> <script> function draw() { inverterOutputCanvas = document.getElementById('inverter-output').getContext('2d'); inverterOutputCanvas.strokeStyle = '#0000FF'; inverterOutputCanvas.lineWidth = 3; for (let i=0; i<730; i+=5) { inverterOutputCanvas.beginPath(); inverterOutputCanvas.moveTo(i+2, 100); inverterOutputCanvas.lineTo(i+2, Math.floor(Math.random()*100)); inverterOutputCanvas.stroke(); inverterOutputCanvas.closePath(); } } </script> </head> <body onload="draw();"> <canvas id="inverter-output" width="730" height="100" style="border: 1px solid lightgray;"></canvas> </body> </html>