|
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
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.
|