Information Technology Reference
In-Depth Information
In der Praxis gut einsetzbar ist diese Methode für Rechtecke mit abgerundeten
Ecken - eine wiederverwendbare Funktion, die das erledigt, ist da nicht fehl am
Platz:
Abbildung 5.11:
Vier Rechtecke mit gerundeten Ecken - der Kreis ist der Extremfall
eines gerundeten Rechtecks
var roundedRect = function(x,y,w,h,r) {
context.beginPath();
context.moveTo(x,y+r);
context.arcTo(x,y,x+w,y,r);
context.arcTo(x+w,y,x+w,y+h,r);
context.arcTo(x+w,y+h,x,y+h,r);
context.arcTo(x,y+h,x,y,r);
context.closePath();
context.stroke();
};
roundedRect(100,100,700,500,60);
roundedRect(900,150,160,160,80);
roundedRect(700,400,400,300,40);
roundedRect(150,650,400,80,10);
Die Funktion
roundedRect()
erwartet neben den Basiswerten für das Recht-
eck selbst den Radius zum Abrunden und zeichnet dann mit einer
moveTo()
-,
vier
arcTo()
- und einer
closePath()
-Methode das gewünschte Rechteck. Die
