Web에 그림 그리기 <canvas>"2d"</canvas> #1 - init set

Fstone·2020년 12월 8일

JavaScript TIL html

canvas

목록 보기

1/2

`<canvas></canvas>`

<canvas>는 HTML요소로 <canvas></canvas> 내 graphic과 animation을 그릴 수 있다.
canvas script API와 WebGL API를 함께 사용한다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,
    maximum-scale=1"
    />
    <title>Practice with canvas</title>
  </head>
  <body>
    <script type="module" src="index.js"></script>
  </body>
</html>

meta : HTML에서<body></body>안에 들어갈 내용을 <head></head>안에 설명하기 위한 요소이다. 직접적으로 render되는 내용은 없지만 render될 때 browser는 meta 내용을 따른다.
- viewport : smart 장치에서 사용하기 위한 화면 구성
  - width=device-width: 해당 기기의 너비를 Web의 너비로 정의한다.
  - initial-scale=1: 해당 기기 너비와 viewport 너비의 비율을 정의한다. 해당 Web에 접근할 때 초기 화면 비율을 정의한다. (0.0 ~ 10.0 사이)
  - maximum-scale=1 : 화면의 최대 확대 비율을 정의 한다. (0.0 ~ 10.0 사이)
- <script type="module" src="index.js"></script>: Web을 기능에 따라 분리하고 하나의 module에서 scripting하기 위해 index.js와 canvas를 분리했다.

index.js

import App from "./App.js";
import "./index.scss";

window.onload = () => {
  new App();
};

window.onload : HTML 모든 content가 render된 시점에서 App을 실행시킨다.

index.css

* {
  outline: 0;
  margin: 0;
  padding: 0;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
}

canvas {
  width: 100%;
  height: 100%;
}

App.js

export default class App {
  constructor() {
    this.canvas = document.createElement("canvas");
    this.ctx = this.canvas.getContext("2d");  document.body.appendChild(this.canvas);
  }
}