我在 HTML Canvas 上使用事件处理程序来跟踪用户点击位置的坐标，我的想法是用一条线将坐标连接在一起。
下面的代码创建了一个数组，并在用户点击的 Canvas 元素中保留了一个坐标列表，还包含在当前点击的点和之前点击的点之间画一条线的逻辑。
我遇到的问题是，无论我点击多少次，即使我的数组中填充了坐标，也不会在点之间绘制线。
我不完全确定我做错了什么，或者是否进行了一些重新渲染可能会擦掉我在 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>最佳答案
将您的上下文移到点击事件之外并使用 Canvas 坐标而不是屏幕坐标:event.x 和 event.y
不要对 Canvas 使用 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 - 如何使用单击事件处理程序在点之间画线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52099450/