[Javascript Basic] 03. 공튕기기 게임(1)

13163 단어 JavaScriptJavaScript

학습목표

  • 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 등등 각 메소드 이해
  • 그리드개념 이해

참고

Canvas API
arc 이용하여 원 그리기

destructuring, double bang
데이터융합 JAVA응용 SW개발자 기업 채용연계 연수과정 24일차 강의 정리

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage