Question

我正在HTML画布上使用事件处理程序来跟踪用户单击位置的坐标，我的想法是将坐标与一条线连接起来。

下面的代码创建一个Array，并在用户单击的canvas元素内保留坐标列表，并且还包含在当前单击的点和先前单击的点之间绘制一条线的逻辑。

我遇到的问题是，无论我单击多少次，即使我的数组中已填充坐标，也不会在两点之间绘制线条。

我不确定自己做错了什么，或者是否做过某些重新渲染，可能会抹去我在画布上绘制的图纸。

var coords = [];
var canvas = document.getElementById('canvas');
canvas.addEventListener('click', function (event) {
    var coord = { "x": event.screenX, "y": event.screenY };
    document.getElementById("coords").innerText = "{" + coord.x + ", " + coord.y + "}";
    coords.push(coord);
    var max = coords.length - 1;
    if (typeof coords[max - 1] !== "undefined") {
        var curr = coords[max], prev = coords[max - 1];
        var context = canvas.getContext("2d");
        context.beginPath();
        context.moveTo(prev.x, prev.y);
        context.lineTo(curr.x, curr.y);
        context.stroke();
    }
});

<!doctype html>
</html>
<head>
    <title>Drawing canvas</title>
    <style>
        canvas {
            width: 200px;
            height: 200px;
            border: 2px solid black;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <p id='coords'></p>
    <canvas id='canvas'></canvas>
</body>
</html>

Answer 1

将上下文移到click事件之外，并使用画布坐标而不是屏幕一：event.x和event.y 不要为画布使用CSS尺寸。选中此post

var coords = [];
var canvas = document.getElementById('canvas');
var context = canvas.getContext("2d");
canvas.addEventListener('click', function (event) {
    var coord = { "x": event.x, "y": event.y};
    document.getElementById("coords").innerText = "{" + coord.x + ", " + coord.y + "}";
    coords.push(coord);
    var max = coords.length - 1;
    if (typeof coords[max - 1] !== "undefined") {
        var curr = coords[max], prev = coords[max - 1];
        context.beginPath();
        context.moveTo(prev.x, prev.y);
        context.lineTo(curr.x, curr.y);
        context.stroke();
    }
});

    <style>
        canvas {     
            border: 1px solid black;
            border-radius: 0px;
        }
        body {
          margin: 0;
          padding: 0;
        }
    </style>

   
    <canvas id='canvas' width="200" height="200"></canvas>
     <p id='coords'></p>

Javascript：如何使用单击事件处理程序在点之间画线？

1 个答案: