학습 목표
- Canvas API 이용하여 html에 그려보기
- document, context 학습
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>
</head>
<body>
<canvas id="myCanvas" width="400" height="400" style="background-color: lightgrey;"></canvas>
<script src="review.js"></script>
</body>
</html>javascript
const canvas = document.getElementById('myCanvas'); // 이 아이디를 가지고 특정 탭에 접근을 한다
const context = canvas.getContext('2d'); // context라는 존재를 통해 그리기를 한다
// arc
let arcPosX = canvas.width / 2
let arcPosY = canvas.height / 2
const arcRaius = 25;
// bar
let barWidth = 120;
let barHeight = 40
let barPosX = canvas.width / 2 - barWidth / 2
let barPosY = canvas.height - barHeight / 2
function draw() {
// 화면 클리어
context.clearRect(0, 0, canvas.width, canvas.height);
// 다른 도형 그리기
drawBar();
drawArc();
}
function drawArc() {
context.beginPath(); // 그리기를 시작하겠다
// x , y , radius , startAngle, endAngle
context.arc(arcPosX , arcPosY , arcRaius, 0, 2 * Math.PI);
context.fillStyle = 'blue'; // 색깔 고르고
context.fill(); // 채우기
context.closePath(); // 그리기를 끝내겠다
}
function drawBar(){
context.beginPath(); // 그리기를 시작하겠다
// x , y , width , height
context.rect( barPosX, barPosY, barWidth, barHeight);
context.fillStyle = 'red'; // 색깔 고르고
context.fill(); // 채우기
context.closePath(); // 그리기를 끝내겠다
}
setInterval(draw, 10);학습 내용
- canvas api를 이용해 도형그리기
- arc, rect, beginPath, closePath 등등 각 메소드 이해
- 그리드개념 이해
참고
🙋♂️블록체인 개발자 되기 / 📑 공부기록 공간