javascript (16) - 캔버스 만들기 #2 (canvas API)

moveTo 와 lineTo 함수

사실 rext도 단축 함수에 포함된다. 이걸 풀어쓰면....moveTo와 lineTo로 나타낼 수 있다.

canvas에서 브러쉬는 항상 (0,0) 좌표에서 시작한다.

moveTo(x,y)함수는 설정좌표까지 브러쉬 위치를 이동하고 (선 긋지 않고 브러쉬만 이동)

lineTo(x,y)함수는 설정 좌표까지 선을 만들어준다. (선 긋도 브러쉬도 이동)

 

ctx.moveTo(50,50); ctx.lineTo(150,50); ctx.stroke();

arc 함수 (원그리기)

ctx.arc(x,y,radius,startAngle,endAngle)

startAngle에서 endAngle 뱡항으로 원을 그리다. 완벽한 원을 그리려면 endAngle = 2*Math.PI 되야한다. (원은 2PI)

startAngle과 endAngle을 조절하여 완벽한 원이 아닌 모습을 그릴 수 있다.

출처 : https://www.w3schools.com/tags/canvas_arc.asp

 

 

[그리기 연습]

ctx는 메모리 기능이 있어 순서에 맞게 작동된다.

ex) ctx.lineWidth = 20; 선 두께를 조절하고 ctx.strokeRect(x,y,w,h)선을 그려야 적용된다.

순서를 바꿨을 경우 선두께는 적용되지 않는다.

속성이 다른 새로운 것을 그릴 때 ctx.beginPath(); 구분하여 만들어주자.

ctx.fillRect(200,200,50,200); ctx.fillRect(400,200,50,200); ctx.fillRect(300,300,50,100); ctx.fillRect(200,170,250,30); ctx.moveTo(200,170); ctx.lineTo(325,100); ctx.lineTo(450,170); ctx.fill();

ctx.fillRect(220-190,200-50,30,130); ctx.fillRect(330-190,200-50,30,130); ctx.fillRect(260-190,200-50,60,200); ctx.arc(100,100,50,0,2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.fillStyle ="red"; ctx.arc(80,80,8,Math.PI,2*Math.PI); ctx.arc(120,80,8,Math.PI,2*Math.PI); ctx.fill(); ctx.beginPath(); ctx.fillStyle ="blue"; ctx.moveTo(70,350);  ctx.lineTo(50,500); ctx.lineTo(80,500); ctx.lineTo(100,380); ctx.lineTo(120,500); ctx.lineTo(150,500); ctx.lineTo(130,350); ctx.fill()