티스토리 뷰

Web

[Web][Canvas] 웹에서 클릭을 감지하여 회전하는 도형 만들기

김도리개발자 2021. 10. 27. 11:01

VS Code에서 작업했고,

로컬에서는 JS가 module로 불러올 때 CORS 에러가 나기 때문에 Live Server라는 extension을 설치하여 진행했다.

설치가 끝나면 우측 하단에 Go Live라는 버튼이 생기는데 요거를 클릭하면 가상 서버에 해당 html파일이 띄워진다.

이 상태로 진행해보자.

 

Interactive Web을 배워보고 싶어서 기초부터 시작했다.

 

Interactive Developer라는 진짜 대단한 월클 유투버가 올려주신 강의를 따라서 개발해보았다.

 

일단 index.html, style.css, test.js, figure.js 파일들을 만든다.

 

style.css

* {
    outline: 0;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
}

canvas {
    width: 100%;
    height: 100%;
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <script type="module" src="test.js"></script>
</body>

</html>

test.js

import { Figure } from './figure.js';

class Test {
    constructor() {
        this.canvas = document.createElement('canvas');
        document.body.appendChild(this.canvas);
        this.ctx = this.canvas.getContext('2d');

        this.pixelRatio = window.devicePixelRatio > 1 ? 2 : 1;
        window.addEventListener('resize', this.resize.bind(this), false);
        this.resize();

        this.isDown = false;
        this.moveX = 0;
        this.offsetX = 0;

        document.addEventListener('pointerdown', this.onDown.bind(this), false);
        document.addEventListener('pointermove', this.onMove.bind(this), false);
        document.addEventListener('pointerup', this.onUp.bind(this), false);

        window.requestAnimationFrame(this.animate.bind(this));
    }

    resize() {
        this.stageWidth = document.body.clientWidth;
        this.stageHeight = document.body.clientHeight;

        this.canvas.width = this.stageWidth * this.pixelRatio;
        this.canvas.height = this.stageHeight * this.pixelRatio;
        this.ctx.scale(this.pixelRatio, this.pixelRatio);

        this.figure = new Figure(
            this.stageWidth / 2,
            this.stageHeight / 2,
            // this.stageHeight + (this.stageHeight / 4),
            this.stageHeight / 3,
            // this.stageHeight / 1.5,
            3   // 도형의 각
        );
    }

    animate() {
        window.requestAnimationFrame(this.animate.bind(this));

        this.ctx.clearRect(0, 0, this.stageWidth, this.stageHeight);

        this.moveX *= 0.92;

        this.figure.animate(this.ctx, this.moveX);
    }

    onDown(e) {
        this.isDown = true;
        this.moveX = 0;
        this.offsetX = e.clientX;
    }

    onMove(e) {
        if (this.isDown) {
            this.moveX = e.clientX - this.offsetX;
            this.offsetX = e.clientX;
        }
    }

    onUp(e) {
        this.isDown = false;
    }
}

window.onload = () => {
    new Test();
}

figure.js

const PI2 = Math.PI * 2;

export class Figure {
    constructor(x, y, radius, sides) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.sides = sides;
        this.rotate = 0;
    }

    animate(ctx, moveX) {
        ctx.save();
        ctx.fillStyle = '#000';
        ctx.beginPath();

        const angle = PI2 / this.sides;
        // const angle2 = PI2 / 4;

        ctx.translate(this.x, this.y);

        this.rotate -= moveX * 0.008;
        ctx.rotate(this.rotate);

        for (let i = 0; i < this.sides; i++) {
            const x = this.radius * Math.cos(angle * i);
            const y = this.radius * Math.sin(angle * i);

            (i == 0) ? ctx.moveTo(x, y) : ctx.lineTo(x, y);

            // ctx.beginPath();
            // ctx.arc(x, y, 30, 0, PI2, false);
            // ctx.fill();

            // ctx.save();
            // ctx.translate(x, y);
            // ctx.rotate(((360 / this.sides) * i + 45) * Math.PI / 180);
            // ctx.beginPath();
            // for (let j = 0; j < 4; j++) {
            //     const x2 = 80 * Math.cos(angle2 * j);
            //     const y2 = 80 * Math.sin(angle2 * j);
            //     (j == 0) ? ctx.moveTo(x2, y2) : ctx.lineTo(x2, y2);

            // }
            // ctx.fill();
            // ctx.closePath();
            // ctx.restore();
        }

        ctx.fill();
        ctx.closePath();
        ctx.restore();
    }
}

 

결과로는 

화면 기록 2021-10-27 오전 10.58.51.mov
2.06MB

 

 

출처 :

https://www.youtube.com/watch?v=urDcoyIc6VQ 

'Web' 카테고리의 다른 글

[React] 반응형 웹 (Media Query, react-responsive)  (0) 2022.09.18
[React] component, page transition, redux, styled component  (0) 2022.08.29
[React] React 개발은 할 줄 아는데 뭔지는 제대로 몰라서  (0) 2022.07.31
[react.js] mac에서 node-sass때문에 npm install, npm start가 안되는 경우  (0) 2021.06.21
[html][css] IE에서 grid 옵션 적용이 안될 때  (1) 2021.05.31
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
글 보관함