StarJade-Park/DrawCircle.html

## DrawCircle.html
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <canvas id="canvas" width="750" height="750" style="border:1px solid lightgrey;"></canvas>
    <script>
        // Declare as variable
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        var width = canvas.width;
        var height = canvas.height;

        var radius;

        // Listen to the onLoad event
        window.onload = init;

        function init()
        {
            context.lineWidth = 0.005;
            context.strokeStyle = 'black';

            radius = 0.9 * Math.min(width, height) / 2;

            window.requestAnimationFrame(gameLoop);
        }

        function gameLoop(timeStamp)
        {
            update();

            draw();

            window.requestAnimationFrame(gameLoop);
        }

        // Declare as variable(for circle draw)
        var angle1;
        var xpos1;
        var ypos1;

        var angle2;
        var xpos2;
        var ypos2;

        function update()
        {
            // find a random point on a circle
            angle1 = Math.random() * 2 * Math.PI;
            xpos1 = (width / 2) + (radius * Math.cos(angle1));
            ypos1 = (height / 2) + (radius * Math.sin(angle1));

            // find another random point on the circle
            angle2 = Math.random() * 2 * Math.PI;
            xpos2 = (width / 2) + (radius * Math.cos(angle2));
            ypos2 = (height / 2) + (radius * Math.sin(angle2));
        }

        function draw()
        {
            context.moveTo(xpos1, ypos1);
            context.lineTo(xpos2, ypos2);
            context.stroke();
        }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="ko">

	<head>
	<meta charset="UTF-8">
	</head>

	<body>
	<canvas id="canvas" width="750" height="750" style="border:1px solid lightgrey;"></canvas>
	<script>
	// Declare as variable
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');

	var width = canvas.width;
	var height = canvas.height;

	var radius;

	// Listen to the onLoad event
	window.onload = init;

	function init()
	{
	context.lineWidth = 0.005;
	context.strokeStyle = 'black';

	radius = 0.9 * Math.min(width, height) / 2;

	window.requestAnimationFrame(gameLoop);
	}

	function gameLoop(timeStamp)
	{
	update();

	draw();

	window.requestAnimationFrame(gameLoop);
	}

	// Declare as variable(for circle draw)
	var angle1;
	var xpos1;
	var ypos1;

	var angle2;
	var xpos2;
	var ypos2;

	function update()
	{
	// find a random point on a circle
	angle1 = Math.random() * 2 * Math.PI;
	xpos1 = (width / 2) + (radius * Math.cos(angle1));
	ypos1 = (height / 2) + (radius * Math.sin(angle1));

	// find another random point on the circle
	angle2 = Math.random() * 2 * Math.PI;
	xpos2 = (width / 2) + (radius * Math.cos(angle2));
	ypos2 = (height / 2) + (radius * Math.sin(angle2));
	}

	function draw()
	{
	context.moveTo(xpos1, ypos1);
	context.lineTo(xpos2, ypos2);
	context.stroke();
	}
	</script>
	</body>

	</html>