Canvas Kreis zeichnen?!

07/11/2017 08:57 TechLead#1
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
07/11/2017 09:05 florian0#2
Ein Thread reicht doch, oder?
[Only registered and activated users can see links. Click Here To Register...]
07/11/2017 09:12 TechLead#3
Quote:
Originally Posted by florian0 View Post
Ein Thread reicht doch, oder?
[Only registered and activated users can see links. Click Here To Register...]
War mir nicht sicher in welcher sub section das rein muss
07/13/2017 14:06 IceTrailer#4
Siehe [Only registered and activated users can see links. Click Here To Register...]
Etwas googlen schadet nie.
07/20/2017 15:39 mhaendler#5
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...
07/20/2017 19:37 warfley#6
Quote:
Originally Posted by mhaendler View Post
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
07/20/2017 19:41 zerogott#7
[Only registered and activated users can see links. Click Here To Register...]