js 图片连线

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

let points = [];

canvas.addEventListener('click', function(event) {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    points.push({x, y});
    draw();
});

function draw() {
    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>

<svg id="mySvg" width="500" height="500"></svg>
<script>
const svg = document.getElementById('mySvg');
let points = [];

svg.addEventListener('click', function(event) {
    const pt = svg.createSVGPoint();
    pt.x = event.clientX;
    pt.y = event.clientY;
    const cursorPt = pt.matrixTransform(svg.getScreenCTM().inverse());
    points.push(cursorPt);
    draw();
});

function draw() {
    const path = document.createElementNS("http://www.w3.org/2000/svg", 'path');
    let d = points.map(p => `${p.x},${p.y}`).join(' L ');
    path.setAttribute('d', `M ${d}`);
    path.setAttribute('stroke', 'black');
    path.setAttribute('fill', 'none');
    svg.innerHTML = ''; // 清除之前的路径
    svg.appendChild(path);
}
</script>