1. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="canavas.js" defer></script>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>
2. java script
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 150, 100);
출처
developer.mozilla.org/ko/docs/Web/HTML/Element/canvas
developer.mozilla.org/ko/docs/Learn/JavaScript/Building_blocks/Looping_code
'Front > Java Script' 카테고리의 다른 글
| Interface(인터페이스) - UI(User Interface) & API(Application Programming Interface) (0) | 2021.04.11 |
|---|---|
| 모듈(Module) & 라이브러리 - 호스트 환경에 따른 모듈의 로드 (0) | 2021.04.11 |
| 스크립트의 로딩 방법 ( 내부 & 외부 자바스크립트 / async & defer ) (0) | 2021.03.14 |
| Callback : Synchronuous(동기) / Asynchronuous(비동기) (0) | 2020.07.04 |
| fetch().then() (0) | 2020.06.14 |
