canvas - 2

wkdgusrhkd·2021년 4월 12일
0

canvas

목록 보기
2/2
post-thumbnail

canvas로 원 또는 호 그리기

canvas 불러오기 🎨

canvas의 시작은 항상 캔버스 불러오기입니다.

<canvas id="canvas" width="800" height="300" style="border: 1px solid black"></canvas>

<script>
const canvas = document.querySelector('#canvas')
const ctx = canvas.getcontext('2d')
</script>

기본이 되는 문법

ctx.arc(x, y, radius, 시작 각, 끝 각, 방향)

위의 명령어 원 or 호 그리기를 위한 메소드입니다.
기억 할 것은 두 가지입니다.

  1. 각도의 단위는 rad이다.
  2. 방향에서 false는 시계 방향, true는 반시계 방향을 의미. 아무것도 없다면 false.

채색의 유무

채색의 유무는 좌표를 찍은 후 마무리를 fill()로 하느냔 stroke()로 하느냐에 따라 달라집니다.

또한 선의 색 지정은 strokeStyle='pink'
배경색 지정은 fillStyle='pink'로 합니다.

각도 보정

우리는 일반적으로 rad 다위가 아닌 degree를 사용하기 위해 각도를 변환해서 사용하는게 편합니다.

각도 보정을 위한 함수는 다음과 같습니다.

function degToRad(degree) {
    return degree * (Math.PI / 180)
}

degToRad(90)를 입력하면 90도rad 단위로 알아서 변환 해 줄것입니다.

호 그리기

아래 부터는 다양한 예제를 따라하며 이해하면 됩니다.

ctx.beginPath()
ctx.fillStyle = 'pink'
ctx.arc(400, 150, 80, degToRad(0), degToRad(90))


ctx.beginPath()
ctx.fillStyle = 'pink'
ctx.arc(400, 150, 80, degToRad(0), degToRad(90), false)


ctx.beginPath()
ctx.fillStyle = 'pink'
ctx.arc(400, 150, 80, degToRad(0), degToRad(90), true)


ctx.beginPath()
ctx.fillStyle = 'pink'
ctx.arc(400, 150, 80, degToRad(0), degToRad(270), true)
ctx.fill()

ctx.beginPath()
ctx.fillStyle = 'orange'
ctx.arc(400, 150, 80, degToRad(90), degToRad(270), false)
ctx.fill()


ctx.beginPath()
ctx.strokeStyle = 'green'  // 선색 지정
ctx.lineWidth = 10         // 선 굵기 지정
ctx.arc(400, 150, 80, degToRad(0), degToRad(90))
ctx.stroke()               // 채색 없이 호 그리기

원 그리기

호 그리기에서 0도에서 360도까지를 연결해주면 원이 됩니다.

ctx.beginPath()
ctx.fillStyle = 'pink'
ctx.arc(480, 150, 80, degToRad(0), degToRad(360))
ctx.fill()

ctx.beginPath()
ctx.fillStyle = 'orange'
ctx.arc(400, 150, 80, degToRad(0), degToRad(360))
ctx.fill()

ctx.beginPath()
ctx.strokeStyle = 'green'
ctx.lineWidth = 10
ctx.arc(320, 150, 80, degToRad(0), degToRad(360))
ctx.stroke()

profile
프론트!

0개의 댓글