[Javascript] Canvas API - 간단한 기능구현(2)

Javascript 로 그림판을 만들기 전에 기초기능부터 살펴보려고 한다. 만들기 전에 활용할 기초기능들을 정리해보았다.

 

Javascript 의 canvas 위치는 이전 포스팅과 같다. 이 포스팅에서는 다음과 같은 기능을 한다.

 

=  특정한 위치로부터 사용자가 클릭한 위치까지 각기 다른색의 선을 그릴 수 있게한다.

 

 

See the Pen Untitled by PogleJeong (@PogleJeong) on CodePen.

---

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d"); // 캔버스에 그림그릴때 context

canvas.width = 800; //css 뿐만 아니라 js에서도 표시
canvas.height = 800;

ctx.lineWidth = 2; // 그릴 선 두꼐

const colors = [ // 다양한 색 활용
    "#ff3838",
    "#af2118",
    "#ffb8b8",
    "#c56cf0",
    "#ff9f1a",
    "#fff200",
    "#32ff7e"
]

function onClick(event) {
    ctx.beginPath(); // 새로운 선 시작, 적용안하면 모든 선의 스타일이 한번에 바뀌게 됨
    ctx.moveTo(0,0); // 선이 시작되는 좌표
    const color = colors[Math.floor(Math.random() * colors.length)]
    ctx.strokeStyle = color; // 선 색상(랜덤)
    ctx.lineTo(event.offsetX, event.offsetY); // 마우스 커서의 위치까지 선 긋기
    ctx.stroke(); // 선 칠하기(linewidth 로 인해 테두리 필요)
}

canvas.addEventListener("click",onClick); // click 말고도 mousemove 하면 재밌음

 

 

앞서 ctx.lineWidth 로 인해 선 테두리를 설정해야한다. ctx.strokeStyle 로 선 테두리 색상 변경하고, 마지막에 ctx.stroke 로 선 테두리를 칠한다.

 

마지막 줄에 canvas.addEventListener("click", onClick) 로 클릭할 때마다 시작지점(0,0)에서 마우스커서지점(offsetX,offsetY) 지점까지 선을 긋는다. click 을 mousemove 로 바꾸면 마우스를 움직일 때마다 선이 무지개처럼 계속 그인다