Pizza

by BGSMM

HTML

<canvas width="300" height="300" id="canvas"></canvas>
<input type="number" min="1" max="360" id="input-part" value="5">

JavaScript

// 설정 변수
 const geom = {
   x: 150,
   y: 150,
   radius: 110,
   statrAngle: 0,
   endAngle: 360,
   anticlockwise: false
 }

 // 각도(degree)를 라디안(radian)으로 변환
 function degToRad(deg) {
   return (Math.PI / 180) * deg
 }

 // 2d 컨텍스트에 원을 n등분하여 그림 
 function divCircle(ctx, part) {

   const eachDeg = 360 / part // n등분 할 경우 각 부분의 각도
   const lineWidth = part <= 8 ? 6 : part <= 16 ? 3 : 1

   if (part == 1) {
     // 1등분인 경우 원을 나눌 필요가 없으므로 단일의 원을 그리고 종료
     ctx.beginPath()
     ctx.arc(geom.x, geom.y, geom.radius, degToRad(0), degToRad(360), geom.anticlockwise)
     ctx.closePath()
     ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0)`
     ctx.fill()
   } else {
     for (let i = 0; i <= part; i++) {
       ctx.beginPath() // 경로 시작
       ctx.lineWidth = lineWidth
       ctx.strokeStyle = "rgba(0, 0, 0, 1)"
       // arc(x, y, radius, startAngle, endAngle, anticlockwise)
       ctx.arc(geom.x, geom.y, geom.radius, degToRad(i * eachDeg), degToRad(i * eachDeg + eachDeg), geom.anticlockwise)
       ctx.lineTo(geom.x, geom.y) // 특정 좌표 위치로 선을 그림
       ctx.closePath() // 경로 종료
       ctx.fillStyle = `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0)`
       ctx.fill() // 채우기
       ctx.stroke() // 윤곽선 그리기
     }
   }
 }

 // 캔버스를 초기화
 function resetCanvas(canvas, cbFunc) {
   const ctx = canvas.getContext("2d")
   ctx.clearRect(0, 0, canvas.width, canvas.height) // 캔버스를 지우고 초기화
   const image = new Image() // 이미지 객체 생성
   image.src = getPizzaBase64()
   image.onload = _ => {
     ctx.drawImage(image, 0, 0) // 이미지 파일 내용을 캔버스 컨텍스트에 배치
     cbFunc()
   }

 }

 // canvas가 로딩되면 실행되는 함수
 (function draw() {
   const canvas = document.getElementById("canvas")
   const ctx = canvas.getContext("2d")

   const numField = document.getElementById("input-part")
   const cbFunc = _ => {
     divCircle(ctx, numField.value)
   }

   resetCanvas(canvas, cbFunc)

   numField.onchange = e => {
    ...