HTML5 Canvas Tutorial for Beginners 필기

2020. 4. 6. 21:38·개발/Canvas
728x90

※ 이 글은 예전 블로그에서 퍼왔으며 2020.3.6.에 작성된 글입니다.

※ 이 글은 해당 사이트를 보고 작성한 글 입니다.


 

모든 HTML5 Canvas를 위한 4가지 필수 스킬들

​

1. Creating and Resizing your canvas

(Canvas를 만들고 크기를 조절할 수 있는 능력)

​

2. Drawing Element

(요소를 그릴 수 있는 능력)

​

3. Animating Element

(정적인 요소를 움직일 수 있게하는 능력)

​

4. Interacting with Element

(이벤트에 따라 요소를 움직일 수 있게하는 능력)


Lecture #1. Creating and Resizing Canvas

​

· Canvas의 사이즈 조절은 HTML attribute나 JS로 하자

canvas.width = innerWidth;
canvas.height = innerHeight;

Lecture #2. Drawing On the Canvas

​

· Canvas Objects:

- 사각형(rect)

- 라인(line)

- 호(arc), 원(circle)

- 베지에 곡선(Bezier Curve)

- 이미지(image)

- 문자(text)

​

· 어떤 도형이나 라인이던 간에 path를 나타내기 전에 beginPath( );를 선언해주자.

이는 두 개 이상의 path들이 서로 연관되는 것(connecting) 분리시켜주는 역할을 한다.

​

· 여러 개의 Objects를 만들어 내고 싶다면 당연히 for문을 사용하자.


Lecture #3. Animating the Canvas

​

· Animation 사용하기

function animation() {
    requestAnimationFrame(animation);
}

· 잔상없애는 법

​

1. rect를 Canvas 전체크기로 생성하여 배경색을 채워준다.

​

2. clearRect( )를 이용한다.

context.clearRect(x, y, width. height);

· 무작위한 방향으로 퍼져나가는 원을 만들고 싶다면

// (Math.random() - 0.5) = 방향 값을 양수와 음수 둘 다 부여하기 위해
const dx = (Math.random() - 0.5) * 8; 
const dy = (Math.random() - 0.5) * 8;

· 브라우저와의 충돌 판정 (원일 경우)

if (this.x + this.r > innerWidth || this.x - this.r < 0) {
  this.dx = -this.dx;
}

if (this.y + this.r > innerHeight || this.y - this.r < 0) {
  this.dy = -this.dy;
}

· 브라우저 경계에 걸쳐지는 원이 없도록 하는 좌표

const x = Math.random() * (innerWidth - r * 2) + r;
const y = Math.random() * (innerHeight - r * 2) + r;

Lecture #4. Interacting with the Canvas

​

· 원이 마우스 포인터 영역 근처일 시 커지게 하기

const mouse = {
    x: undefined,
    y: undefined
}

window.addEventListener("mousemove", function (e) {
    mouse.x = event.x;
    mouse.y = event.y;
})

if (mouse.x - this.x < mouseArea && 
    mouse.x - this.x > -mouseArea && 
    mouse.y - this.y < mouseArea && 
    mouse.y - this.y > -mouseArea) {
  if (this.r < maxR) {
    this.r += 1;
  }
} else if (this.r > this.minR) {
  this.r -= 1;
}

· 브라우저 사이즈 조절 시 캔버스 사이즈 재조정

window.addEventListener("resize", function () {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
})
저작자표시 (새창열림)

'개발 > Canvas' 카테고리의 다른 글

Canvas tutorial #7 (Images)  (1) 2020.04.06
Canvas tutorial #6 (Fill Styles)  (0) 2020.04.06
Canvas tutorial #5 (Shapes)  (0) 2020.04.06
Canvas tutorial #4 (Paths)  (0) 2020.04.06
Canvas tutorial #3 (Curves)  (0) 2020.04.06
'개발/Canvas' 카테고리의 다른 글
  • Canvas tutorial #7 (Images)
  • Canvas tutorial #6 (Fill Styles)
  • Canvas tutorial #5 (Shapes)
  • Canvas tutorial #4 (Paths)
기짜낭
기짜낭
생각이 많지만, 지금 내가 해야할 것을 하자.
  • 기짜낭
    So tired
    기짜낭
    • 분류 전체보기 (199)
      • 개발 (11)
        • Javascript (19)
        • Typescript (5)
        • Canvas (8)
        • React (13)
        • C (3)
      • 활동 (63)
        • 개인 프로젝트 (33)
        • 나눔 서포터즈 3기 (9)
        • 멋쟁이 사자처럼 (7)
        • 0&1 C++ 자료구조 스터디 (0)
        • 제 9회 창업 아이디어톤 (3)
        • Poom (ZeroWasteShop) (3)
        • 해커톤 (2)
        • 우테코 프리코스 7기 (6)
      • 알고리즘 (27)
        • 알고리즘 정리 (5)
        • 백준 (18)
        • 프로그래머스 (4)
      • 강연 (7)
      • 독서 (18)
      • 회고 & 생각 (16)
        • 연간회고 (4)
      • 기타 (5)
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

    • ※ 예전 블로그
  • 인기 글

  • 태그

    프로그래밍
    개발
    독서
    TypeScript
    프로젝트
    react
    개발자
    에리카
    백준
    프론트엔드
    독후감
    1주 1권
    한양대학교
    Erica
    디자인
    군대
    알고리즘
    개념
    타입스크립트
    ES6
    우테코
    1주에 1권씩
    대학
    3기
    Javascript
    CSS
    HTML5
    tutorial
    HTML
    canvas
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
기짜낭
HTML5 Canvas Tutorial for Beginners 필기
상단으로

티스토리툴바