Llamadas idénticas para producir diferentes tamaños

Question

Estoy tratando de descubrir por qué dibujar una forma, luego dibujar sobre ella en un nuevo color (como para resaltarlo), y luego volver a dibujar el original (sin altura) está dejando rastros del color resaltado.

He reproducido el problema en este violín. La cuña se dibuja en un color azul claro. Hay un botón rojo que lo atraerá en rojo, luego otro botón que vuelve a dibujar la forma original. Todos los parámetros son idénticos (excepto el color), pero después de hacer clic en el botón para restablecer el color, hay un débil rastro de rojo sobre la cuña.

Antes:

Después:

Aquí está el código relevante:

drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");

$("#red").click(function () {
    drawWedge(250, 250, 200, 0, 18, "rgb(255, 0, 0)");
});

$("#back").click(function () {
    drawWedge(250, 250, 200, 0, 18, "rgb(150, 254, 223)");
});

function d2r(degrees) {
    return degrees * (Math.PI / 180.0);
}

function drawWedge(centerX, centerY, r, start, end, color) {
    context.beginPath();
    context.moveTo(centerX, centerY);
    context.arc(centerX, centerY, r, d2r(start), d2r(end), false);
    context.closePath();
    context.fillStyle = color;
    context.fill();
}

Answer 1

Cuando se basa en el lienzo, simplemente se mantiene apilarse las cosas uno encima del otro hasta que lo aclaren. La forma más fácil de aclararlo es ctx.clearRect(0,0,width,height)

Pongo eso en tu función de Drawwedge aquí:

http://jsfiddle.net/x7deh/1

Answer 2

Esta pregunta ya fue respondida, pero quería dar una explicación un poco más completa.

Cuando dibujas en una diagonal, pasas a través de "partes" de píxeles (muestra en mi ejemplo). Entonces, ¿qué hace el navegador a la parte del píxel fuera de la forma? Utiliza anti-aliasing (anti-aliasing siempre está activado de forma predeterminada para los navegadores) para colorear el resto del píxel (si no tuviera anti-aliasing, la línea se vería irregular). Si nota, el débil rastro de rojo no es un rojo brillante porque se mezcla debido a la anti-alias. Y la razón por la que lo ves es porque cuando dibujas tu forma en el lienzo, el débil rastro de rojo no es parte de tu forma, es parte del píxel en el exterior de tu forma.

Ahora, como se mencionó la respuesta, puede llamar clearRect Para despejar el lienzo. Sin embargo, deberías leer esto Cuestión Como explica las cosas con más detalle (la respuesta seleccionada no es tan buena como la segunda respuesta). Además, ¿alguna vez se preguntó por qué lo llaman un "lienzo"? Piense en un lienzo de arte real utilizado por los artistas, una vez que pintan en el lienzo, ¡no hay forma de quitárselo a menos que obtenga un nuevo lienzo o pinte sobre él!