Kurven
| Der arc-Befehl |
arc(x, y, radius, startWinkel, endWinkel, gegenUhrzeigersinn)
| Beispiel 1 |
for(var i=0;i<4;i++){
for(var j=0;j<3;j++){
ctx.beginPath();
var x = 25+j*50; // x coordinate
var y = 25+i*50; // y coordinate
var radius = 20; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = Math.PI+(Math.PI*j)/2; // End point on circle
var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise
ctx.arc(x,y,radius,startAngle,endAngle, anticlockwise);
if (i>1){
ctx.fill();
} else {
ctx.stroke();
}
}
}
Dabei wird geschickt über die Endwinkel und auch über "fill" und "stroke" variiert.
Die x-Koordinate hängt direkt von j ab, die y-Koordinate von i. Daher kann man sehr schön aus der Position des jeweiligen arcs auf seine Parameter zurückschließen.
Beispielsweise gilt für i=3 und j=2, dass mit 2π ein Vollkreis gezeichnet und dieser wegen i>1 auch noch gefüllt wird.
Komplexes Arc-Beispiel
| Bezier- und quadratische Kurven mit zwei Endpunkten |
quadraticCurveTo(cp1x, cp1y, x, y) // zeichnet eine quadratische Kurve
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) // zeichnet eine Bezierkurve unter zuhilfename eines weiteren Punktes
Bezier- und quadrat. Kurven
Bezier- und quadratische Kurven mit zwei Endpunkten
| Beispiel 2 |
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();