Viertelkreise mit JS und Canvas

[ComFreek]

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]

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]

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

 

[Quaese]

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]

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]

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]

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]

Ja, ist meins.

Ciao
Quaese