본문 바로가기
canvas

canvas 마우스 클릭으로 선 그리기

HaeRik 2021. 7. 1. 01:47

문제가 있을 시 알려주시면 감사하겠습니다.

 

html

<!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>Document</title>

    <link rel="stylesheet" href="./css/styles.css">
</head>
<body>
    <script src="./js/app.js" type="module"></script>
</body>
</html>

 

 

 

css

html, body {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;}
canvas {width: 100%; height: 100%; background: #f2f2f2;}

 

 

 

javascript

app.js (module)

import { Line } from "./line.js";

class App {
    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));
        this.resize();

        this.pos = {};

        this.line = new Line();

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

        this.canvas.addEventListener('mousedown', this.onDown.bind(this));
        this.canvas.addEventListener('mouseup', this.onUp.bind(this));
        this.canvas.addEventListener('mousemove', this.onMove.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);
    }

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

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

        this.line.draw(this.ctx);
    }

    onDown (e) {
        this.pos.x = e.offsetX;
        this.pos.y = e.offsetY;

        this.line.onDown(this.pos.x, this.pos.y);
    }

    onMove (e) {
        this.pos.x = e.offsetX;
        this.pos.y = e.offsetY;

        this.line.onMove(this.pos.x, this.pos.y);
    }

    onUp (e) {
        this.pos.x = e.offsetX;
        this.pos.y = e.offsetY;

        this.line.onUp(this.pos.x, this.pos.y);
    }
}

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

 

 

 

line.js (module)

let isDown = false;

export class Line {
    constructor () {
        this.point = {}
        this.pointLine = {}
        this.pointEnd = {}
    }

    draw (ctx) {
        if (this.point.x === undefined || this.point.y === undefined) {
            ctx.fillStyle = 'transparent';
        } else {
            ctx.fillStyle = '#7e0000';
        }
        ctx.beginPath();
        ctx.arc(this.point.x, this.point.y, 10, 0, Math.PI * 2, true);
        ctx.fill();
        ctx.closePath();

        this.drawLine(ctx);
        this.drawLastPoint(ctx);
    } 

    drawLine (ctx) {
        ctx.beginPath();
        ctx.moveTo(this.point.x, this.point.y);
        ctx.lineTo(this.pointLine.x, this.pointLine.y);
        ctx.strokeStyle = '#7e0000';
        ctx.lineWidth = 6;
        ctx.stroke();
        ctx.closePath();
    }

    drawLastPoint (ctx) {
        ctx.beginPath();
        ctx.arc(this.pointEnd.x, this.pointEnd.y, 10, 0, Math.PI * 2, true);

        if (isDown) {
            ctx.fillStyle = 'transparent';
        }

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

    onDown (x, y) {
        this.point.x = x;
        this.point.y = y;
        this.pointLine.x = x;
        this.pointLine.y = y;

        isDown = true;
    }

    onMove (x, y) {
        if (isDown) {
            this.pointLine.x = x;
            this.pointLine.y = y;
        }
    }

    onUp (x, y) {
        this.pointEnd.x = x;
        this.pointEnd.y = y;

        isDown = false;
    }
}

 

 

 

결과

 

'canvas' 카테고리의 다른 글

canvas 마우스를 따라다니는 원  (0) 2021.06.23
canvas 마우스 클릭시 해당 좌표로 원 이동  (0) 2021.06.23

'canvas' Related Articles

티스토리툴바