# Viertelkreise mit JS und Canvas



## ComFreek (14. August 2010)

Hallo an alle,

wie bekomme ich Viertelkreise mit JS und Canvas hin? Ich bekomme nur Halbkreise, Vollkreise und "komische" Teilkreise hin.
Hier ist mein bisheriger Code:

```
// ctx ist der Kontext des Canvas
Degree = 180;  // Halbkreis kommt raus
Degree = 360;  // Vollkreis kommt raus
Degree = 90;    // "komischer" Teilkreis kommt raus, siehe Bild

ctx.arc(X, Y, R, 0, (Math.PI*Degree)/180, false);
```

Wie bekomme ich das hin?
Vielen Dank im Voraus!


----------



## SpiceLab (14. August 2010)

Hast du es im fünften Parameter "anticlockwise" schon mal mit *true* anstelle von *false* versucht, damit der Bogen gegen den Uhrzeigersinn geschlagen wird?

Pfad-Schnittstelle - arc()


----------



## ComFreek (14. August 2010)

Danke für deine Antwort.
Ja, habe ich, dann kommt abr genau das Gegenstück zum Kreis bei Bild #3


----------



## Quaese (14. August 2010)

Hi,

beweg den Pfad zunächst mittels *moveTo* in den Mittelpunkt des Kreises.

```
ctx.beginPath();
ctx.moveTo(X, Y);
ctx.arc(X, Y, R, 0, (Math.PI*90)/180, false);
ctx.closePath();
```
Ausserdem solltest du einen neuen Pfad beginnen und diesen auch wieder schliessen. Sonst reagieren diverse Browser unter Umständen recht eigenartig.

Ciao
Quaese


----------



## ComFreek (15. August 2010)

Quaese hat gesagt.:
			
		

> Ausserdem solltest du einen neuen Pfad beginnen und diesen auch wieder schliessen. Sonst reagieren diverse Browser unter Umständen recht eigenartig.


Danke, aber ich habe den Code nur mal schnell kopiert und etwas rausgelöscht 

Jetzt bekomme ich einen Viertelkreis hin, vielen Dank. Zur Übung will ich jetzt einen ganzen Kreis aus vier Viertelkreisen zusammenbauen. Bis jetzt bekomme ich nur die rechte Seite hin:

```
function Draw()
    {
      ctx = document.getElementById("canvas").getContext("2d");
      
      ctx.fillStyle = "rgba(255,0,0,1)";
      
      ctx.beginPath();
        ctx.moveTo(50, 50);
        ctx.arc(50, 50, 50, 0, (Math.PI*270)/180, true);
      
        ctx.moveTo(50, 50);
        ctx.arc(50, 50, 50, 0, (Math.PI*90)/180, false);
      ctx.closePath();
      
      ctx.fill();
      ctx.stroke();
    }
```
Weiß jemand, wie die anderen Teile gehen?


----------



## Quaese (15. August 2010)

Hi,

du drehst einmal mit und einmal gegen den Uhrzeigersinn, aber jedes Mal mit einem grösseren Winkel im zweiten Argument.

Weiterhin musst du für jeden Viertelkreis einen neuen Pfad erstellen und diesen schliessen.

Mein Vorschlag für einen Vollkreis aus Viertelkreisen:

```
for(var i=0; i<4; i++){
  ctx.beginPath();
  ctx.moveTo(50, 50);
  ctx.arc(50, 50, 50, (i*Math.PI/2), ((i+1)*Math.PI/2), false);
  ctx.fillStyle = "rgba("+(255-i*40)+",0,0,1)";
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
}
```
Ciao
Quaese


----------



## ComFreek (15. August 2010)

Vielen Dank Quaese! Sogar mit Farbverlauf 

Ich werde mir mal das Tutorial auf der Seite http://canvas.quaese.de/ anschauen, das ist doch deins, oder?


----------



## Quaese (16. August 2010)

Ja, ist meins.

Ciao
Quaese


----------

