Chiamate identiche all'arco che produce dimensioni diverse

Question

Sto cercando di capire perché disegnare una forma, quindi disegnarla su un nuovo colore (come per evidenziarla), e quindi rideavere l'originale (non alligerino) sta lasciando tracce del colore evidenziato.

Ho riprodotto il problema in Questo violino. Il cuneo è disegnato in un colore blu chiaro. C'è un pulsante rosso che lo disegnerà in rosso, quindi un altro pulsante che ri-trava la forma originale. Tutti i parametri sono identici (ad eccezione del colore), ma dopo aver fatto clic sul pulsante per ripristinare il colore, c'è una debole traccia di rosso sul cuneo.

Prima:

Dopo:

Ecco il codice pertinente:

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

Quando si basa su tela, mantiene solo impilando le cose l'una sopra l'altra finché non lo cancellano. Il modo più semplice per cancellarlo è ctx.clearRect(0,0,width,height)

L'ho messo nella tua funzione DrawWedge qui:

http://jsfiddle.net/x7deh/1

Answer 2

Questa domanda ha già risposto, ma volevo dare una spiegazione un po 'più approfondita.

Quando ti disegni in una diagonale, passa attraverso "parti" di pixel (mostra nel mio esempio). Quindi cosa fa il browser alla parte del pixel al di fuori della forma? Utilizza l'anti-aliasing (l'anti-aliasing è sempre acceso per impostazione predefinita per i browser) per colorare il resto del pixel (se non avessi anti-aliasing la linea sembrerebbe frastagliata). Se noti, la debole traccia di rosso non è un rosso brillante perché viene miscelato a causa dell'anti-aliasing. E il motivo per cui lo vedi è perché quando disegni la tua forma sulla tela, la debole traccia di rosso non fa parte della tua forma, la sua parte del pixel all'esterno della tua forma.

Ora, come menzionato la risposta, puoi chiamare clearRect Per cancellare la tela. Tuttavia, dovresti leggere questo Quindi domande Come spiega le cose in modo più dettagliato (la risposta selezionata non è buona come la seconda risposta). Inoltre, ti chiedi perché lo chiamano "tela"? Pensa a una vera tela d'arte usata dagli artisti, una volta che dipingono sulla tela non c'è modo di toglierla a meno che non si ottiene una nuova tela o dipingi su di essa!