반응형
ctx.lineCap
-
JavaScript 입문 : 캔버스 (Canvas) 기초 - 마우스 이용 자유 곡선 그리기컴퓨터 알아가기/JavaScript 2022. 11. 6. 19:30
Canvas 기초 두번째 시간으로 이제는 본격적으로 함수를 이용하여 곡선 그리기에 도전을 하고자 합니다. 이 곳에서는 마우스를 사용하며 기본적으로 addEventListener의 마우스 이벤트를 활용하여 진행하고자 합니다. 다음 그림과 같이 자유 곡선 기능을 사용하여 Canvas내 글씨를 써 보는게 오늘 목표입니다. 이 내용은 'developedbyed 유투브 강좌'를 기본으로 응용해 본 것입니다. 캔버스에 마우스를 이용하여 자유 곡선을 만들고자 하면 이벤트를 이용합니다. 마우스를 누르고 그리기 때문에 시작점은 'mousedown'이벤트가 필요하고 그리기를 끝내는 경우는 'mouseup'입니다. 그리고 본격적으로 그려지는 이벤트는 'mousemove'입니다. ① 마우스 이벤트 기본구조 만들기 Canvas..