[노마드코더] 바닐라 JS로 그림 만들기

바닐라JS로 그림 앱 만들기 – 노마드 코더 Nomad Coders

Build a Meme Maker

nomadcoders.co

canvas api

- js로 그래픽을 그릴 수 있게 해주는 api -> 브라우저 화면에서 픽셀을 그릴 수 있게 함

<!--index.html-->
<!--생략-->
  <body>
    <!--canvas api-->
    <canvas></canvas>
    <script src="app.js"></script>
  </body>
<!--생략-->

- context : 붓(브러쉬) -> 캔버스에 그림을 그릴 때 사용

- getContext()

1. canvas 요소에 대한 렌더링 context 및 관련 그리기 기능을 얻는 데 사용

2. context 유형 -> 2d, bitmaprenderer, webgl, webgl2 (2d를 제외한 나머지는 3d)

//app.js
const canvas = document.querySelector("canvas"); //canvas 불러오기
const ctx = canvas.getContext("2d"); //context

- canvas 크기를 css에 작성 후 js에도 작성 -> 앞으로 크기는 js에서만 수정할 것!

/*styles.css*/
canvas {
  width: 500px;
  height: 500px;
  border: 5px solid black;
}

//app.js
//생략
canvas.width = 500;
canvas.height = 500;

- canvas의 좌표 : 왼쪽 코너 맨 위에서 시작 -> 0 0 / 가로 x, 세로 y

- fillRect(x, y, w, h) : 사각형을 채우는 함수

//app.js
//생략
ctx.fillRect(50, 50, 100, 200); // 좌표(50,50)에서 시작된 가로 100 세로 200인 꽉찬 사각형

[노마드코더] 바닐라 JS로 그림 만들기 - moveTo and lineTo (0)	2023.08.25
[노마드코더] 바닐라 JS로 그림 만들기 - paths (0)	2023.08.24
[노마드코더] 바닐라 JS로 그림 만들기 - project setup (0)	2023.08.22
[Javascript][개념정리] Array.filter() (0)	2023.01.12
[노마드코더] 바닐라 JS로 크롬 앱 만들기 - 현재 날씨 알려주기 (0)	2022.12.22

나도 할래 개발자