canvas_arc.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas {
background-color: lightpink;
}
</style>
<script>
function draw() {
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath(); // 펜 도구 선택
ctx.arc(100,100,100,0,Math.PI*2,true); // true 반시계방향
ctx.moveTo(380,200); // 시작 위치 - 처음 점 찍기
ctx.arc(300,200,80,0,Math.PI, true); // false 시계방향
ctx.stroke(); // 선 그려짐
}
</script>
</head>
<body onload="draw()">
<canvas width="500" height="500" id="canvas"></canvas>
</body>
</html>
canvas_arc_ex.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#canvas {
background-color: lightblue;
}
</style>
<script>
function draw() {
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
// 💚 호와 원그리기
// ctx.arc(x, y, radius, startA, endA, true);
// 🔽 라이안 각도
// 360도 ) Math.PI*2
// l도 ) Math.PI / 180
for(let i=0; i<3; i++) {
for(let j=0; j<3; j++) {
ctx.beginPath();
let x = 150 + j*200;
let y = 150 + i*200;
let endA = Math.PI + (Math.PI*j)/2;
let anticlockwise = i%2 !=0 ? true : false;
ctx.arc(x,y,50,0,endA,anticlockwise);
if(i>1) {
ctx.fill(); // 칠하기
} else {
ctx.stroke(); // 선 그려짐
}
}
}
}
</script>
</head>
<body onload="draw()">
<canvas width="1000" height="1000" id="canvas"></canvas>
</body>
</html>
