HTML5, Canvas löschen

**BlueJay** · 04-06-2011, 16:19

Hallo Leute,

ich mache gerade die ersten Gehversuche mit HTML5. Mich interessiert da besonders der Canvas.

Irgendwie habe ich es geschafft, darauf herumzumalen, aber wie bekomme ich die Striche wieder weg?

Meine Versuche:

Code:

var xmax=500,ymax=300;
var my_canvas,ctx;

function init_canvas()
{
   my_canvas=document.getElementById('krabbelfeld'); 
   ctx=my_canvas.getContext('2d');
}

function canvas_leeren() { ctx.clearRect(0,0,xmax,ymax); }

function draw_line(x0,y0,x1,y1) 
{ 
   ctx.strokeStyle = "white";
   ctx.moveTo(x0,y0);
   ctx.lineTo(x1,y1);
   ctx.stroke();
}

Klickt man da auf [neu], soll der Canvas gelöscht und zwei verbundene Käfer gezeigt werden. Leider ergibt mehrmaliges Klicken ein ziemliches Gekritzel.

Zu sehen unter:
http://www.gamecraft.de/kroetenwanderung/

Gruß,
Ulrike

**zenobic** · 04-06-2011, 17:16

Hallo,

wenn man im Firebug in der Konsole:
ctx.clearRect(0,0,my_canvas.width,my_canvas.height );
absetzt wird die canvas gelöscht, beim neuzeichnen der Verbindungen allerdings wieder angezeigt.

Das folgende (zusätzliche) Ändern der width hat im Firebug funktioniert:

Code:

var __w = my_canvas.width;
my_canvas.width =  __w;

http://stackoverflow.com/questions/2...-for-redrawing

**BlueJay** · 04-06-2011, 19:40

... stimmt, da heben sich 2 Bugs auf

Dein Code löscht auch ohne die clearRect-Anweisung den Canvas, allerdings nur im FF4.

Habe eine bessere Lösung gefunden, die draw_line-Funktion wurde mit context.beginPath() versehen, also neu:

Code:

function draw_line(x0,y0,x1,y1)
{
    ctx.strokeStyle = "white"; 
    ctx.beginPath();       // <--- der hat gefehlt!
    ctx.moveTo(x0,y0);
    ctx.lineTo(x1,y1);
    ctx.closePath();       // <--- Ordnung muss sein! ;)
    ctx.stroke();
}

function canvas_leeren() 
{
   ctx.clearRect(0,0,my_canvas.width,my_canvas.height);
}

klappt in FF4, IE9 und Opera11

Gruß,
Ulrike