학습 캔버스

1. vscode에 익숙해야 합니다.
2. HTML, CSS 및 javascript에 대한 기본적인 이해가 있어야 합니다.

<!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">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas1"></canvas>
    <script src="script.js"></script>
</body>
</html>

다음으로 페이지의 다른 모든 요소에 대한 컨테이너인 "html" 요소가 있습니다. 문서의 언어를 지정하는 "en"으로 설정된 "lang" 속성이 있습니다.

"html" 요소 안에는 문서의 문자 인코딩 및 제목과 같은 문서에 대한 메타 정보를 포함하는 "head" 요소가 있습니다. 문서의 문자 인코딩을 지정하는 "UTF-8"로 설정된 "charset" 속성을 포함하는 "meta" 요소가 있습니다. "http-equiv" 속성이 "X-UA-Compatible"로 설정되고 "content" 속성이 "IE=edge"로 설정된 "meta" 요소는 페이지가 최신 버전의 Internet Explorer에서 렌더링되도록 합니다. 또한 "name" 속성이 "viewport"로 설정되고 "content" 속성이 "width=device-width, initial-scale=1.0"으로 설정된 "meta" 요소가 있어 페이지가 다른 화면 크기에 반응하도록 합니다.

또한 "rel" 속성이 "stylesheet"로 설정되고 "href" 속성이 "styles.css"로 설정된 "link" 요소가 있어 CSS 스타일시트를 HTML 문서에 연결합니다.

문서의 제목은 "제목" 요소에 설정됩니다.

"body" 요소 안에는 "id" 특성이 "canvas1"로 설정된 "canvas" 요소가 있으며 여기에서 JavaScript 코드가 애니메이션을 그릴 것입니다. 마지막으로 "src" 속성이 "script.js"로 설정된 "script" 요소가 있습니다. 이 요소는 JavaScript 파일을 HTML 문서에 연결합니다.

const canvas = document.getElementById('canvas1');
const context = canvas.getContext('2d');

const FRAME_WiDTH = canvas.width = 600;
const FRAME_HEIGHT = canvas.height = 600;

console.log(context);

const PLAYERIMAGE = new Image();
PLAYERIMAGE.src = 'img/shadow_dog.png';

// custom function
let x = 0;
function animate(){
    context.clearRect(0, 0, FRAME_WiDTH, FRAME_HEIGHT);
    context.fillRect(x,100,100,100);
    context.drawImage(PLAYERIMAGE, 50, 50,)

    requestAnimationFrame(animate);
};

animate();

다음으로 캔버스 요소의 너비와 높이로 각각 설정되는 두 개의 상수 "FRAME_WIDTH"와 "FRAME_HEIGHT"를 정의합니다. 또한 "console.log" 함수를 사용하여 컨텍스트 변수를 콘솔에 출력합니다.

그런 다음 새 이미지 개체를 만들고 "PLAYERIMAGE" 상수에 저장합니다. 그런 다음 해당 이미지 개체의 "src" 속성을 이미지 파일의 경로로 설정합니다.

또한 "animate"라는 사용자 지정 함수를 만들고 있습니다. 이 함수는 requestAnimationFrame 메서드를 사용하여 루프에서 반복적으로 호출됩니다. animate 함수 내에서 먼저 "clearRect" 메서드를 사용하여 전체 캔버스를 지웁니다. 그런 다음 "fillRect" 메서드를 사용하여 (x, 100)의 x, y 좌표에 너비와 높이가 100픽셀인 사각형을 그립니다. 그런 다음 "drawImage" 메서드를 사용하여 x 및 y 좌표(50, 50)에서 캔버스에 "PLAYERIMAGE"를 그립니다.

마지막으로 애니메이션 루프를 시작하기 위해 "animate" 함수를 한 번 호출합니다. 그리고 애니메이션 효과를 내기 위해 각 루프에서 x 변수가 업데이트됩니다.

계속해서 코드와 프로젝트를 점진적으로 성장시킬 것입니다.