(Meme Maker) #집 만들기

 

집 만들기

 

---

 

 

- 만들고 싶은 기능

혼자서 집을 만들어 봤다..

 

• moveTo(x좌표, y좌표) : x좌표, y좌표로 이동
• lineTo(x좌표, y좌표) : x좌표, y좌표로 이동하면서 그리기 
• stroke() : 선긋기
• fillRect(x좌표, y좌표, 너비, 높이) : 사각형 그리기
• stokeRect(x좌표, y좌표, 너비, 높이) : 테두리만 있는 사각형 그리기
• lineWidth = "설정값" : 선의 굵기 설정하기

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");

canvas.width = 700;
canvas.height = 700;

ctx.fillRect(200, 200, 40, 200);
ctx.fillRect(450, 200, 40, 200);
ctx.lineWidth = 10;
ctx.strokeRect(330, 300, 40, 100);
ctx.moveTo(200, 200);
ctx.lineTo(350, 100);
ctx.lineTo(480, 200);
ctx.lineTo(200, 200);
ctx.stroke();