kostenloser Webspace werbefrei: lima-city

Canvas Kreis zeichnen.

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   16:35, 26.5.2013

   Hallo,
   anschienend hat Chrome Schwirigkeiten mit der arc Funktion um einen Kreis zu zeichnen, da ich dies aber dringend brauche, dachte ich mir, dass ich die Funktion ersetze. Dazu hab ich mal folgendes gemacht:
   
   

   CanvasRenderingContext2D.prototype.arc = function(x, y, radius, startAngle, endAngle, anticlockwise) {
   		var winkel = 2 * Math.PI / 180;
   
   		for (var i = startAngle; i <= 360; i++) {
   			var xk = Math.cos(i*winkel)*radius;
   			var yk = Math.sin(i*winkel)*radius;
   			
   			console.log(xk+" "+yk);
   
   		}
   	}

   
   
   So bekomme ich sozusagen jede Koordinate des Kreises um ihn selbst zu zeichnen. Ich dachte mir ich mach noch in der Schleife immer moveTo und lineTo mit (x+xk, y+yk). Dann sollte doch eigentlich ein Kreis entstehen, genau an der Position an der ich will. Ich bekomme aber einfach einen weissen Canvas und keinen Error.
   
   Beitrag zuletzt geändert: 26.5.2013 16:39:45 von c143

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. r**n

   17:04, 26.5.2013

   Folgende Funktion funktioniert bei mir in Chrome 27 und Firefox 21 ohne Probleme:
   

   var canvas = document.getElementById('circle');
   var context = canvas.getContext('2d');
   var centerX = canvas.width / 2;
   var centerY = canvas.height / 2;
   var radius = 100;
   
   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
   context.lineWidth = 1;
   context.strokeStyle = '#003300';
   context.stroke();

   
   
   Entsprechend das ganze dann mit
   

   <canvas id="circle" width="300" height="300"></canvas>

   
   einbinden.
   
   Beitrag zuletzt geändert: 26.5.2013 17:15:03 von ra1n
4. Autor dieses Themas

   c143

   c143 hat kostenlosen Webspace.

   17:19, 26.5.2013

   ra1n schrieb:
   Folgende Funktion funktioniert bei mir in Chrome 27 und Firefox 21 ohne Probleme:
   

   var canvas = document.getElementById('circle');
   var context = canvas.getContext('2d');
   var centerX = canvas.width / 2;
   var centerY = canvas.height / 2;
   var radius = 100;
   
   context.beginPath();
   context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
   context.lineWidth = 1;
   context.strokeStyle = '#003300';
   context.stroke();

   
   
   Entsprechend das ganze dann mit
   

   <canvas id="circle" width="300" height="300"></canvas>

   
   einbinden.

   
   
   Hat sie bei mir auch, dann gab es schwirigkeiten bei anderen (ohne etwas am Script zu ändern) und heute auch noch bei mir. Zeit anstatt einem Kreis ein Quadrat an. Ich habe dann gegoogled und anscheinend gibts in Chrome grad schwirigkeiten damit.

5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?