Effacement de lignes précédemment dessinées sur une toile HTML5

De jouer avec HTML5 canvas, j'ai décidé de faire une application qui dessine un analogique affichage du cadran. Tout va bien, sauf que les vieux ne sont pas effacées de la manière que je m'attends. J'ai inclus une partie du code ci-dessous - DrawHands() est appelée une fois par seconde:

var hoursPoint = new Object();
var minutesPoint = new Object();
var secondsPoint = new Object();

function drawHands()
{
    var now = new Date();

    drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "white", 1);
    var seconds = now.getSeconds();
    secondsPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI / 60 * seconds, 0.75 * radius);
    drawLine(centerX, centerY, secondsPoint.X, secondsPoint.Y, "black", 1);

    drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "white", 3);
    var minutes = now.getMinutes();
    minutesPoint = getOtherEndOfLine(centerX, centerY, 2 * Math.PI / 60 * minutes, 0.75 * radius);
    drawLine(centerX, centerY, minutesPoint.X, minutesPoint.Y, "black", 3);

    drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "white", 3);
    var hours = now.getHours();
    if (hours >= 12) { hours -= 12; } //Hours are 0-11
    hoursPoint = getOtherEndOfLine(centerX, centerY, (2 * Math.PI / 12 * hours) + (2 * Math.PI / 12 / 60 * minutes), 0.6 * radius);
    drawLine(centerX, centerY, hoursPoint.X, hoursPoint.Y, "black", 3);
}

À faire sens de ce qui précède, il y a deux fonctions d'aide:

drawLine(x1, y1, x2, y2, couleur, épaisseur)
getOtherEndOfLine(x, y, angle, longueur)

Le problème est que, bien que toutes les mains dessinés comme prévu dans le noir, ils ne sont jamais effacés. Je m'attends à ce que, depuis la même ligne est tracée en blanc (la couleur du fond), il serait effectivement effacer ce qui a été précédemment établi à ce point. Mais cela ne semble pas être le cas.

Rien de ce que je suis absent?

source d'informationauteur Saqib

13

Pour des raisons que je pourrais développer, vous devriez envisager la suppression de votre toile et de le restituer entièrement sauf s'il existe des performances de composition ou des raisons de ne pas.

Vous voulez clearRectquelque chose comme ceci:
```
//clear the canvas so we can draw a fresh clock
ctx.clearRect(0, 0, canvasWidth, canvasHeight);

//redraw your clock here
/* ... */
```
4

La raison pour laquelle vous ne pouvez pas il suffit de redessiner la ligne blanche et de l'espoir pour effacer l'ancienne ligne est car il pourrait y avoir un anti-aliasing et les saignements. Vous remarquerez également qu'une ligne horizontale tracée sur un pixel par rapport à un demi-pixel semble très différent à cause de cela.

Lorsque vous faites votre blanc "effacer" les lignes, essayez de le faire avec un plus grand lineWidth d'environ 3 ou 4. Cela devrait fonctionner pour votre cas.

Vous devez également dessiner toutes les lignes blanches d'abord, puis toutes les lignes noires, dans le cas où ils se croisent.
4

Un moyen facile et rapide pour effacer une toile est de définir la largeur:
```
context.canvas.width = context.canvas.width;
```

Vous devez vous connecter pour publier un commentaire.