<canvas id="tutorial" width="150" height="150"></canvas>
<canvas>는 처음에는 src 및 alt 속성이 없다는 점만 제외하면 <img> 요소처럼 보입니다. 실제로 <canvas> 요소에는 width와 height의 두 속성만 있습니다. 이것들은 모두 선택사항이며 DOM 프로퍼티를 사용하여 설정할 수도 있습니다. width 및 height 속성을 지정하지 않으면 캔버스의 처음 너비는 300 픽셀이고 높이는 150 픽셀입니다. 요소는 CSS에 의해 임의로 크기를 정할 수 있지만 렌더링하는 동안 이미지는 레이아웃 크기에 맞게 크기가 조정됩니다. CSS 크기 지정이 초기 캔버스의 비율을 고려하지 않으면 왜곡되어 나타납니다 .
만약 렌더링이 왜곡된 것처럼 보이는 경우 CSS를 사용하지 않고 width 및 height 속성을 명시적으로 지정하자!
canvas.width = 60vw;
canvas.height = 50vh;
// 화면 크기에 맞춰서 설정!
canvas.width = innerWidth;
canvas.height = innerHeight;
이렇게 DOM으로 설정해 주는 방법도 있습니다. 유동적으로 값설정을 하기 때문에 크기가 고정이 안되어있을때 사용하면 좋습니다.
</canvas> 태그는 필수
대체 컨텐츠가 제공되는 방식때문에, <img> 요소와 달리, <canvas> 요소는 닫는 태그(</canvas>)가 필요합니다. 닫는 태그가 없다면, 문서의 나머지 부분이 대체 컨텐츠로 간주되고 보이지 않을 것입니다.
대체 컨텐츠가 필요하지 않다면, 단순히 <canvas id="foo" ...></canvas>가 모든 미지원 브라우저에서 완전하게 호환됩니다.
랜더링 컨텍스트
<canvas> 엘리먼트는 고정 크기의 드로잉 영역을 생성하고 하나 이상의 렌더링 컨텍스(rendering contexts)를 노출하여, 출력할 컨텐츠를 생성하고 다루게 됩니다.
캔버스는 처음에 비어있습니다. 무언가를 표시하기 위해서, 어떤 스크립트가 랜더링 컨텍스트에 접근하여 그리도록 할 필요가 있습니다. <canvas> 요소는 getContext() 메서드를 이용해서, 랜더링 컨텍스트와 (렌더링 컨텍스트의) 그리기 함수들을 사용할 수 있습니다. getContext() 메서드는 렌더링 컨텍스트 타입을 지정하는 하나의 파라메터를 가집니다.
var canvas = document.getElementById("tutoial");
var ctx = canvas.getContext("2d");
첫 번째 줄의 스크립트는 document.getElementById() 메서드를 호출하여 <canvas> 요소를 표시할 DOM을 검색합니다. 요소가 있으면 getContext() 메서드를 사용하여 드로잉 컨텍스트에 액세스 할 수 있습니다.
기본 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="application/javascript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
// 사각형 내부를 색칠할 색상 설정
ctx.fillStyle = "rgb(200,0,0)";
// x좌표, y좌표, 가로길이, 세로길이
ctx.fillRect(10, 10, 50, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(30, 30, 50, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Basic_usage
'Pre Onboarding' 카테고리의 다른 글
| [RTK Query] 캐싱 (0) | 2022.03.03 |
|---|---|
| RTK Query 엔드포인트 url 변수로 변경하기 및 데이터 조작하기 (0) | 2022.02.28 |
| [PreOnboarding] 번들링과 웹팩 (0) | 2022.02.23 |
| [PreOnboarding] RTK Query를 사용해보자 (0) | 2022.02.23 |
| [PreOnboarding] DOM 이란? (0) | 2022.02.22 |
댓글