반응형

클릭한 곳에 사각형 생성하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Canvas tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            draw();
        });

        function draw() {
            var ctx;
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                ctx = canvas.getContext("2d");
            }

            $(canvas).on("click", function (e) {
                if (canvas.getContext) {
                    var l = $(this).offset().left;
                    var t = $(this).offset().top;
                    var x = e.pageX - l;
                    var y = e.pageY - t;
                    var w = 15;
                    var h = 15;

                    ctx.fillStyle = "rgb(255, 187, 0)";
                    ctx.fillRect(x, y, w, h);
                }
            })
        }
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: 1px solid black;
        }

        #canvas {
            position: relative;
            top: 150px;
            left: 600px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="750" height="750"></canvas>
</body>
</html>

canvas를 생성하고, 생성한 캔버스를 클릭하면 현재의 좌표를 받고 지정한 사이즈와 색상으로 사각형을 생성하는 예제입니다.

 

사각형 생성

 

 

클릭한 곳에 동그라미 생성하기

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Canvas tutorial</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            draw();
        });

        function draw() {
            var ctx;
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                ctx = canvas.getContext("2d");
            }

            $(canvas).on("click", function (e) {
                if (canvas.getContext) {
                    var l = $(this).offset().left;
                    var t = $(this).offset().top;
                    var x = e.pageX - l;
                    var y = e.pageY - t;
                    var r = 5;
                    console.log("canvas click" + x + "    " + y);

                    ctx.beginPath();
                    ctx.fillStyle = "rgb(54, 138, 255)";
                    ctx.arc(x, y, r, 0, Math.PI * 2, true);
                    ctx.fill();
                }
            })
        }
    </script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            border: 1px solid black;
        }

        #canvas {
            position: relative;
            top: 150px;
            left: 600px;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="750" height="750"></canvas>
</body>
</html>

사각형과 원리는 동일하며 생성하는 데이터각 사각형이 아닌 동그라미를 생성하고 그립니다.

 

동그라미 생성

 

반응형
저작자표시 비영리 변경금지

'WEB > Canvas' 카테고리의 다른 글

p5.js - 하트가 빙글빙글 돌면서 움직이는 예제(heart moving and rotates)  (0) 2021.02.19
P5.js - 3D 도형 정육면체 제어하기  (0) 2021.02.16
P5.js - 시작하기  (0) 2021.02.16
Canvas - 캔버스를 활용한 사인창 만들기  (0) 2020.07.21
Canvas - 두개의 점 사이를 화살표 처리하기  (0) 2020.07.16

티스토리툴바