HTML5 CANVAS ZEICHENFLÄCHE LÖSCHEN

[slyder_pat]

hiho.. ich weiß nich, ob ich zu doof bin, aber ich möchte ein Diagramm zeichnen lassen, dassje nach aufruf sich entsprechend der übergebenen parameter von AJAX ändern soll.

Das Diagramm funktioniert ganz gut, aber wenn die Funktion neu aufgerufen wird, übermalt er immer das bereits bestehende =(

ich hab es mit ctx.clearRect(x, y, w, h); versucht, aber das funzt auch nicht =(

ich weiß nich, was ich falsch mache,, weiß jmd. vllt. bescheid und kann mir helfen? =)

hier die ganze zeichen funktion:

  
/////////////////////////////////////////////////////////////////////////// ZEICHNEN  
function drawThatShit(ergebnis){  
          // get the canvas element using the DOM  
        var canvas = document.getElementById('giveDiagramm');  
  
        // Make sure we don't execute when canvas isn't supported  
        if (canvas.getContext){  
  
          // use getContext to use the canvas for drawing  
          var ctx = canvas.getContext('2d');  
  
ctx.clearRect(0, 0, 1020, 505);  // Fläsche löschen -> x,y,w,h  
var maxwidth = 1020; var maxheight = 505;  
var anzDays = ergebnis[0].length;  
  
var dateScale=new Array(); var i = 0;  
if(anzDays<10){  
  do{  
    dateScale[i] = ergebnis[0][i];  
	i++  
  }while(i<=10);  
}else{  
  var z=0;i=0;var rechDay;  
  do{  
	rechDay = Number(anzDays) /10;  
	rechDay = Math.round(rechDay);  
	z = i*rechDay;  
    dateScale[i] = ergebnis[0][z];  
	i++  
  }while(i<10);  
  z = Number(anzDays)-1;  
  dateScale[10] = ergebnis[0][anzDays];  
}  
  
ctx.fillStyle = "Black";  
          var i=0;  
		  ctx.strokeStyle = 'black';  
		  ctx.lineWidth = 1;  
          ctx.beginPath();  
         do{  
          ctx.moveTo(20,5+(i*50));  
          ctx.lineTo(1020,5+(i*50));  
		  var z = i+8;  
		  ctx.fillText(i*(Number(ergebnis[2]) / 10), 5, maxheight-(i*50)+3);  // y-achsen beschriftung  
		  if(dateScale[i]){ctx.fillText(dateScale[i], 110+(i*100), 515);};  // x-achsen beschriftung  
		  i++  
         }while(i<=10);  
         ctx.stroke();	  
		            // Stroked triangle  
		  ctx.strokeStyle = "#FFA500";  
		  ctx.lineWidth = 5;  
          ctx.beginPath();  
          ctx.moveTo(20,5);  
          ctx.lineTo(20,505);  
          ctx.lineTo(1020,505);  
          /*ctx.closePath();*/  
		  ctx.stroke();  
  
		  
		  ctx.strokeStyle = "#FF0000";  
		  ctx.lineWidth = 5;  
          ctx.beginPath();  
          ctx.moveTo(20,505);  
          ctx.lineTo(120,420);  
          ctx.lineTo(220,380);  
          ctx.lineTo(320,300);  
          ctx.lineTo(420,250);  
		  ctx.lineTo(520,250);  
		  ctx.lineTo(620,300);  
		  ctx.lineTo(720,150);  
		  ctx.lineTo(820,280);  
		  ctx.lineTo(920,40);  
		  ctx.stroke();  
		  
		  
        } else {  
          alert('You need Safari or Firefox 1.5+ to see this demo.');  
        }  
  
}  

[slyder_pat]

okay, hat sich grade erledigt.. mit :

ctx.clearRect(0, 0, canvas.width, canvas.height); // Fläsche löschen -> x,y,w,h  

.. wieso auch immer das jetzte gefunzt hat -.-'

trotzdem danke, falls ich euch nen Kopf gemacht habt =)

[Don P]

Hallo,

hiho.. ich weiß nich, ob ich zu doof bin, aber ich möchte ein Diagramm zeichnen lassen, dassje nach aufruf sich entsprechend der übergebenen parameter von AJAX ändern soll.

In ein fertig gezeichnetes canvas kann man meines Wissens nachträglich nichts mehr zusätzlich zeichnen. Es muss jedesmal neu gezeichnet werden.

Das Diagramm funktioniert ganz gut, aber wenn die Funktion neu aufgerufen wird, übermalt er immer das bereits bestehende =(

Eben.

Gruß, Don P