자바스크립트 캔버스 원 그리기 arc()

행복햐 2017. 8. 18. 13:29

출처: https://www.w3schools.com/tags/canvas_arc.asp


원을 그린다.

arc( centerX, centerY, Radius, StartAngle, EndAngle)

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>


<script>


var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(100, 75, 50, 0,  2* Math.PI);

ctx.stroke();


</script> 

Your browser does not support the HTML5 canvas tag.


<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Your browser does not support the HTML5 canvas tag.</canvas>


<script>


var c = document.getElementById("myCanvas");

var ctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(100, 75, 50, 0,  1.5* Math.PI);

ctx.stroke();


</script> 


Your browser does not support the HTML5 canvas tag.