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

canvas API?

자바스크립트로 2D 그림을 그리게 해주는 도구. WebGL은 2D와 3D 그래픽을 그릴 수 있다.

html, css에서 많은 작업 필요없이 자바스크립트로 구현할 수 있다.

- Canvas API 공식문서 : https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- Canvas 예시 : https://codepen.io/ (코드펜 검색)
- 벚꽃 : https://codepen.io/at80/pen/kyOdeK
- Spiral : https://codepen.io/hakimel/pen/QdWpRv
- Falling confetti(색종이) : https://codepen.io/linrock/pen/nMadjQ
- Parallax Skyline : https://codepen.io/jackrugile/pen/nmexZj
- Fizzy Sparks : https://codepen.io/waisbren89/pen/gwvVpP
- Fireworks : https://codepen.io/juliangarnier/pen/gmOwJX
- Mechanical Grass : https://codepen.io/tholman/pen/DvYNNV



---

캔버스 만들기 #1

1) html <canvas> 작성
2) JS로 작성한 canvas 접근
3) context 불러오기
4) 캔버스 크기 설정
5) 사각형 그리기

 

3) context 불러오기

context : 그림을 그리기 위한 붓(브러쉬), const context = canvas.getContext(" (option) ")

옵션에는 2d, webgl, bitmaprenderer 있다. (webgl, bitmaprenderer: 3d)

 

4) 캔버스 크기 설정

css에서 width,height 800px 사각형 캔버스 크기 설정 후 자바스크립트에도 해당 크기 인식시켜야한다.

그림을 그리면서 width,height 수정할 때는 자바스크립트에서 수정한다.

 

왼쪽 위에 끝 부터 좌표 (0,0) 시작

 

5) 사각형 그리기

ctx.fillRect(x좌표, y좌표, width, height)

ㄴ fillRect 는 단축함수! 원래는 선을 그리고 fill or storke 선택한다. (fill: 색상채우기 / stroke: 선그리기)

ctx.rect(x,y,w,h) 눈에 보이지 않는 선을 그린다.

ctx.fill() 검정색으로 색을 채운다.

ctx.stroke() 검정색으로 선을 채운다. 

ctx.beginPath() 경로를 분리한다 (레이어 새로 생성)

ctx.fillStyle="red" fill색상을 빨강으로 설정

 

ctx.rect(50,50,100,100);  ctx.rect(150,150,100,100); ctx.fill();                   ctx.rect(250,250,100,100);
ctx.rect(50,50,100,100); ctx.rect(150,150,100,100); ctx.rect(250,250,100,100); ctx.fill();
ctx.rect(50,50,100,100); ctx.rect(150,150,100,100); ctx.rect(250,250,100,100); ctx.fill(); ctx.beginPath();  ctx.rect(350,350,100,100); ctx.fillStyle="red"; ctx.fill();