如何编写JavaScript脚本实现在HTML Canvas上创建可用于画线的点？

以下是完整的实现代码，满足点击Canvas生成圆点，且用点击的点作为起点和终点绘制线条的需求：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid #ccc;
            cursor: crosshair;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="600" height="400"></canvas>

    <script>
        // 获取Canvas元素和绘图上下文
        const canvas = document.getElementById('myCanvas');
        const ctx = canvas.getContext('2d');

        // 存储点击生成的点的数组
        const points = [];

        // 设置圆点样式
        ctx.fillStyle = '#ff4444';
        // 设置线条样式
        ctx.strokeStyle = '#222222';
        ctx.lineWidth = 2;

        // 处理Canvas点击事件
        canvas.addEventListener('click', function(e) {
            // 计算点击位置相对于Canvas的坐标（修正页面偏移）
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            // 绘制圆形点
            ctx.beginPath();
            ctx.arc(x, y, 5, 0, Math.PI * 2);
            ctx.fill();

            // 将当前点存入数组
            points.push({ x, y });

            // 当数组中至少有2个点时，用最后两个点绘制线条
            if (points.length >= 2) {
                const POINT_A = points[points.length - 2];
                const POINT_B = points[points.length - 1];
                
                // 调用你提供的画线代码
                ctx.beginPath();
                ctx.moveTo(POINT_A.x, POINT_A.y);
                ctx.lineTo(POINT_B.x, POINT_B.y);
                ctx.stroke();
            }
        });
    </script>
</body>
</html>

关键细节说明 #

• 坐标计算：使用getBoundingClientRect()获取Canvas在页面中的位置，修正点击事件的clientX/clientY得到Canvas内部的相对坐标，避免页面滚动或元素偏移导致的坐标错误。
• 点数组维护：用数组points存储所有点击生成的点，每次点击后取数组最后两个点作为连线的起点和终点。
• 样式定制：你可以修改fillStyle、strokeStyle、lineWidth以及圆点半径（arc的第三个参数）来调整视觉效果。
• 画线逻辑：严格按照你提供的画线代码实现，仅将POINT_A和POINT_B替换为数组中存储的坐标对象。

内容的提问来源于stack exchange，提问作者maruan