<canvas>로 피자 조각(파이) 그리기 - 삼각함수 사용

지난 게시물 참조 : 시작점과 반지름과 각도만 주어진 상황에서 끝점 x,y좌표를 삼각함수를 이용하여 찾는 방법

aosceno.tistory.com/511

 

 

HTML과 CSS

JS

 

const container = document.getElementById('container');
const cv = document.getElementsByTagName('canvas')[0];
const ctx = cv.getContext('2d');
 
/* 01. 캔버스 크기 설정 */
function setSize(){
    cv.width = container.clientWidth;
    cv.height = container.clientHeight;
    //0)clear
    ctx.clearRect(0,0,container.clientWidth,container.clientHeight);
    draw(getRad(0), getRad(330), 450, 300, 'red', true);
    draw(getRad(180), getRad(210), 150, 300, 'red', false);
 
    draw(getRad(0), getRad(30), 450, 300, 'orange', false);
    draw(getRad(180), getRad(150), 150, 300, 'orange', true);
 
    draw(getRad(270), getRad(240), 300, 150, 'yellow', true);
    draw(getRad(90), getRad(120), 300, 450, 'yellow', false);
 
    draw(getRad(90), getRad(60), 300, 450, 'green', true);
    draw(getRad(270), getRad(300), 300, 150, 'green', false);
 
    draw(getRad(330), getRad(300), 
        300 + 150 * Math.cos(getRad(30)), 
        300 + 150 * Math.sin(getRad(-30)), 'skyblue', true);
    draw(getRad(30), getRad(60), 
        300 + 150 * Math.cos(getRad(30)), 
        300 + 150 * Math.sin(getRad(30)), 'skyblue', false);
 
    draw(getRad(210), getRad(240), 
        300 - 150 * Math.cos(getRad(30)), 
        300 - 150 * Math.sin(getRad(30)), 'salmon', false);
    draw(getRad(150), getRad(120), 
        300 - 150 * Math.cos(getRad(-30)), 
        300 - 150 * Math.sin(getRad(-30)), 'salmon', true);
    
}//setSize()
 
/* 02. 그리기 메쏘드 */
function getRad(deg){ return deg * (Math.PI / 180);}
 
// 300,300 위치에서, 반지름150의, 30도 짜리 피자 조각을 그려보자
function draw(start_deg, end_deg, endX, endY, fColor, bl){
    //1)arc 그리기
    ctx.lineWidth = 10;
    ctx.beginPath();
    ctx.arc(300,300, 150, start_deg, end_deg, bl);
    ctx.stroke();
    //2)반지름 그리기
    ctx.lineTo(300,300);
    ctx.stroke();
    ctx.lineTo(endX,endY);
    ctx.stroke();
    ctx.fillStyle = fColor;
    ctx.fill();
    ctx.closePath();
}
 
setSize();
/* 윈도우 크기 변경시 */
window.addEventListener('resize',setSize);