D.evelop/MarkUp

[HTML]canvas 사용법 - 기본 (rect, path, arc)

Danne 2023. 5. 27. 15:35

1. html에 canvas 요소 작성

<body onload="drawMyCanvas();">
  <canvas id="myCanvas"></canvas>
</body>

 

2. js로 canvas를 세팅

function drawMyCanvas(){
  let canvas = document.getElementById("myCanvas");
  
  // 어떤 콘텐츠를 그릴 것인가
  let ctx = canvas.getContext("2d");
  
  // 캔버스 사이즈, 배경색 등 설정
  canvas.width = 500;
  canvas.height = 500;
  canvas.style.backgroundColor = "lightyellow"
}

 

1. 사각형 메서드

 

ctx.strokeRect(x, y, w, h);
ctx.fillRect(x, y, w, h);
ctx.clearRect(x, y, w, h);

 

 

 

 

2. Path 메서드

 

 ctx.beginPath();
 ctx.moveTo(x, y);
 ctx.lineTo(x, y);
 ctx.stroke();

 

 

 

 

3. 원/원호 메서드

 

arc(x, y, r, 시작각도, 종료각도, 그리는 방향)

  • x, y : 원/원호의 중심표
  • r : 반지금
  • 시작각도, 종료각도 : radian단위 사용 (각도 * Math.PI/180), 3시를 기점으로 시계방향으로 +됨
  • 그리는 방향 : false(default) - 시계 방향 , true - 반시계 방향

 

 

 

 

 

반응형