Canvas Kreis zeichnen?!

TechLead · 07/11/2017, 08:57

Hey Leute ,
Ich wollte mal fragen ob mir jemand behilflich sein könnte, und zwar müsste ich mithilfe von canvas einen Kreis der durch eine Eingabe von einem Radius erstellt wird , programmieren.
Das alles in Lazarus bzw. Delphi

florian0 · 07/11/2017, 09:05

Ein Thread reicht doch, oder?

TechLead · 07/11/2017, 09:12

Quote:

Originally Posted by florian0

Ein Thread reicht doch, oder?

War mir nicht sicher in welcher sub section das rein muss

IceTrailer · 07/13/2017, 14:06

Siehe

Etwas googlen schadet nie.

mhaendler · 07/20/2017, 15:39

PHP Code:


			
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<input type="Number" id="radius" value="2" onChange="drawCircle()" />

<script>

function drawCircle(){
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var radius = document.getElementById("radius").value;
      
    ctx.clearRect(0, 0, 300, 150); //clear the canvas before redrawing the circle
      
    ctx.beginPath(); //begin drawing
    ctx.arc(100, 75, 50, radius, 2 * Math.PI); //make a curve
    ctx.stroke(); //stop drawing
};

drawCircle();

</script> 

</body>
</html>

War ne Arbeit von 5 Minuten, hätte man auch mit Googlen wahrscheinlich noch schneller schaffen können...

_
mhaendler

//EDIT Sorry mein Fehler, hab das mit der Sprache überlesen...

warfley · 07/20/2017, 19:37

Quote:

Originally Posted by mhaendler

PHP Code:

<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag.</canvas> <input type="Number" id="radius" value="2" onChange="drawCircle()" /> <script> function drawCircle(){ var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var radius = document.getElementById("radius").value; ctx.clearRect(0, 0, 300, 150); //clear the canvas before redrawing the circle ctx.beginPath(); //begin drawing ctx.arc(100, 75, 50, radius, 2 * Math.PI); //make a curve ctx.stroke(); //stop drawing }; drawCircle(); </script> </body> </html>

War ne Arbeit von 5 Minuten, hätte man auch mit Googlen wahrscheinlich noch schneller schaffen können...

_
mhaendler

Nur leider ist das kein Pascal Code sondern Javascript

zerogott · 07/20/2017, 19:41