js鼠标点击坐标并画图

在JavaScript中，通过监听鼠标点击事件并获取点击坐标来实现在画布上绘制图形是一个常见的需求。以下是实现这一功能的基础概念、步骤和相关代码示例。

基础概念

HTML5 Canvas：一个用于在网页上绘制图形的HTML元素。
事件监听：使用JavaScript监听鼠标点击事件。
坐标系统：Canvas的坐标系统原点位于左上角，x轴向右增加，y轴向下增加。

实现步骤

创建一个Canvas元素并获取其上下文。
监听鼠标点击事件，获取点击坐标。
在获取到的坐标上绘制图形。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draw on Click</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        // 获取Canvas元素及其上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 存储所有点击点
        let points = [];

        // 监听鼠标点击事件
        canvas.addEventListener('click', function(event) {
            // 获取点击坐标（相对于Canvas）
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;

            // 将坐标添加到数组中
            points.push({ x, y });

            // 清空画布并重新绘制所有点
            redraw();

            // 在新点击的位置绘制一个圆
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, 2 * Math.PI);
            ctx.fill();
        });

        // 重新绘制所有点
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            points.forEach((point, index) => {
                if (index === 0) {
                    ctx.moveTo(point.x, point.y);
                } else {
                    ctx.lineTo(point.x, point.y);
                }
            });
            ctx.stroke();
        }
    </script>
</body>
</html>