🦁_21.12.22 TIL

Bori·2021년 12월 22일

멋쟁이사자처럼_프론트엔드 스쿨 1기

목록 보기

49/60

21년 12월 22일

📝 시각화 도구

📎 Chart.js

Chart.js 홈페이지 보다 Chart.js - W3Schools이 정리가 더 잘 된 것 같습니다.

📎 Canvas API

Canvas API는 Javascript와 HTML <canvas>요소를 통해 그래픽을 그릴 수 있는 수단을 제공
애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작, 실시간 영상처리에 사용

<!DOCTYPE html>
<html lang="ko">
<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>canvas tutorial</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        // 캔버스에서 어떻게 그릴지(랜더링) 컨텍스트를 받아옵니다.
        const ctx = canvas.getContext('2d');

        // 그림을 그려줌
        function drawRect(ctx){
            // x, y 좌측 상단 기준 x, y 좌표
            // w는 넓이, h는 높이
            let x = 10,
            y = 50,
            w = 200,
            h = 100;
            ctx.fillStyle = 'green';
            ctx.fillRect(x, y, w, h);
        }
        drawRect(ctx);
    </script>
</body>
</html>