Estoy tratando de usar un lienzo HTML5 para dibujar una línea roja a la izquierda de una línea verde. Aquí está mi javascript:¿Por qué no puedo dibujar dos líneas de diferentes colores en mi lienzo HTML5?
var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;
var canvasContext = canvas.getContext('2d');
canvasContext.beginPath();
// Draw the red line.
canvasContext.strokeStyle = '#f00';
canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.stroke();
// Draw the green line.
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#0f0';
canvasContext.lineTo(50, 100);
canvasContext.stroke();
document.body.appendChild(canvas);
Sin embargo, en Google Chrome, me sale una línea de color verde oscuro a la izquierda de una línea de color verde claro. ¿Por qué? Llamé golpe dos veces ¿verdad? Por lo tanto, ¿por qué mi primer golpe debería afectar mi segundo golpe?
Here es un JSFiddle que ilustra a qué me refiero.
Gracias, si ese es el caso, tengo una segunda pregunta: ¿Por qué la línea a la izquierda es más oscura que la otra? No establecí un valor de opacidad para ninguna línea, entonces ¿por qué el lienzo mezcló los colores? – dangerChihuahua007
Honestamente, no tengo idea. Al mirar la [documentación] (http://dev.w3.org/html5/2dcontext/#dom-context-2d-beginpath), parece que 'beginPath()' borra los subtrazos, por lo que posiblemente la segunda línea sea (de alguna manera)) una combinación de la anterior y la actual. – Blender
Creo que es porque lo dibujaste dos veces, si eliminas el trazo inicial, ambos serán de los mismos colores, aunque esto todavía es extraño, no creo que los búferes de cuadros se borren, cuando invocas un trazo varias veces, o algo que ver con la opacidad predeterminada. –