UHU-StartseiteInformatikTechnikenjava-scriptcanvas-Element
Rechtecke, die Grundfiguren


Grundbefehle zum Umgang mit Rechtecken
fillRect(x,y,width,height)  // Füllt einen rechteckigen Bereich
strokeRect(x,y,width,height)// Zeichnet einen rechteckigen Rahmen
clearRect(x,y,width,height) // Löscht einen rechteckigen Bereich, die Hintergrundfarbe wird sichtbar



Einfache Beispiele

function draw(){
  var canvas = document.getElementById('tutorial');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
 
    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}




Ergebnis des 1. Beispiels

Zuerst wird ein schwarzes Quadrat gezeichnet, dann ein konzentrisches Quadrat mit "clearRect" ausgestanzt und hinterher noch ein Rahmen dorthinein gezeichnet.

optimal sichtbar mit Firefox Formeln mit asciimath Druckversion