HTML Canvas 란?

 

🔍 canvas 란?

Canvas는 웹상에 도형과 같은 그래픽적인 것을 표현 할 때 사용하는 HTML 태그이다. 즉, 스크립트를 사용하여 그래프나 도형, 이미지 등을 그릴 수 있는 html5의 요소이다.

TMI) html5가 나오기 이전에는 web상에 그래프를 만든다거나 그래픽을 이용한 게임 등을 만들 경우, 이것을 서버 쪽에서 구현하거나 java 혹은 flash 같은 외부 플러그인에 의존해야했다.

📌How to use <canvas></canvas>?

1. html 내에서 canvas 태그 작성

...
</head>

<body>
  <!-- canvas 태그 -->
  <canvas id="canvas-js"class="canvas"></canvas>
</body>

2. css 내에서 canvas의 가로 세로 길이 지정

.canvas {
  width: 500px;
  height: 500px;
  background-color: #333;
}

3. JavaScript 내에서 오브젝트를 생성하고 드로잉 할 컨텍스트 생성하기

const canvas = document.getElementById('canvas-js');
const ctx = canvas.getContext('2d');

canvas.width = 500;
canvas.height = 500;

📌 HTMLCanvasElement.getContext()

HTMLCanvasElement.getContext() 메소드는 캔버스의 드로잉 컨텍스트를 반환합니다. 컨텍스트 식별자가 지원되지 않을 경우 null을 반환합니다.

구문
var ctx = canvas.getContext(contextType);

파라미터
"contextType" : 캔버스에 연관된 드로잉 컨텍스트를 정의하는 컨텍스트 식별자를 갖는 DOMString입니다.

"2d" : 2차원 렌더링 컨텍스트를 나타내는 CanvasRenderingContext2D (en-US) 객체를 생성하게 합니다.

출처: https://developer.mozilla.org/ko/docs/Web/API/HTMLCanvasElement/getContext

📎 getContext() 메소드로 캔버스의 드로잉 컨텍스트를 생성한다.
이 메소드의 파라미터로 '2d'를 전달하면, 이를 통해 2차원 렌더링 컨텍스트 객체를 받게된다.
즉, getContext() 메소드를 할당한 ctx기준으로 그림을 그리는 기능이 동작하는 것이다.

📌 width & height

캔버스 크기 조절: CSS vs. HTML
캔버스의 표시 크기는 CSS로도 수정할 수 있습니다.
그러나, CSS를 사용할 경우 렌더링 과정에서 CSS 크기에 맞추기 위해 이미지의 크기를 조절하므로, 최종 그래픽이 변형될 수 있습니다.
따라서 <canvas> 요소의 width와 height 특성을 통해 직접 크기를 바꾸는 것이 좋습니다. HTML에서 직접 할 수도 있고, JavaScript를 사용할 수도 있습니다.
출처: https://developer.mozilla.org/ko/docs/Web/HTML/Element/canvas

TMI) width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀이다.

📎위의 코드에서도 css에서 이미 .canvas에 width와 height를 설정하였는데, js에서도 canvas의 width와 height 크기를 설정하였다.
그러나 html 또는 Js에서 캔버스의 크기를 설정하였다면 css에서는 따로 크기를 설정 할 필요가 없다.

📌그려볼까?

생성한 context의 속성 및 함수를 이용해서 실제로 그려보자

const canvas = document.getElementById('canvas-js');
const ctx = canvas.getContext('2d');


canvas.width = 500;
canvas.height = 500;

ctx.fillStyle="orange";
ctx.fillRect(0,0,300,300);

📌 좌표

위의 코드에서 fillRect함수를 사용해서 정사각형의 도형을 드로잉했다.

🧷context.fillRect(x, y, w, h)

위의 구문과 같이 이 fillRect 함수를 사용 할 때 파라미터로 올 수 있는 값은 네가지가 있다.

x: x 좌표 / y: y좌표 / w: 도형의 넓이/ h: 도형의 높이

지금은 (0,0)을 기준으로 가로 300, 세로 300의 크기를 가진 정사각형을 그린것인데, 이로인해 캔버스의 왼쪽 위 모서리가 캔버스의 기준점이 되는 것 을 알 수 있다.

따라서 캔버스의 좌표는 다음과 같다.



저작자표시 비영리 변경금지 (새창열림)

티스토리툴바