我有一个文本文件，其内容如下：
{x:-391.41900634766,y:35.793998718262},
{x:-391.15798950195,y:35.486000061035},
{x:-390.94049072266,y:35.178001403809},
{x:-390.67950439453,y:34.869998931885},
{x:-390.46200561523,y:34.583999633789},
{x:-390.20098876953,y:34.276000976562},
{x:-389.94000244141,y:33.967998504639},
{x:-389.67901611328,y:33.659999847412},
{x:-389.46148681641,y:33.374000549316},
{x:-289.20050048828,y:23.06600189209},
{x:-288.93951416016,y:22.779998779297},
{x:-288.67849731445,y:22.47200012207},
每个x-y对表示x-y平面中的点的坐标。使用PHP或Javascript，如何从该文件中提取坐标并在所有点上绘制一条线？
使用JavaScript画布，您可以仅使用第一个和最后一个值绘制该行：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.body.querySelector("#myCanvas");
var ctx = canvas.getContext('2d');
function drawLine (X1, Y1, X2, Y2){
ctx.save();
ctx.beginPath();
ctx.translate(X1, Y1)
ctx.moveTo(0, 0);
ctx.lineTo(X2, Y2);
ctx.stroke();
ctx.restore();
}
drawLine(4, 4, 300, 300)
</script>
</body>
您可以使用所需的X1，Y1，X2和y2值替换JavaScript代码末尾的函数调用。所以在你的情况下，函数调用将是第一个值和最后一个值的X和Y，如下所示：
drawLine(-391.41900634766, 35.793998718262, -288.67849731445, 22.47200012207)
编辑：避免使用负值，因为它们不在JavaScript画布的视图框中。相反，只使用正值。
编辑2：如果你真的想使用负值，请改用以下代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script>
var canvas = document.body.querySelector("#myCanvas");
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
function drawLine (X1, Y1, X2, Y2){
ctx.save();
ctx.beginPath();
ctx.translate(canvasWidth/2, canvasHeight/2)
ctx.moveTo(X1, X2);
ctx.lineTo(X2, Y2);
ctx.stroke();
ctx.restore();
}
drawLine(-50, 50, 70, 270)
</script>
</body>
</html>编辑3：我刚刚意识到你想绘制椭圆形而不是直线，但是现在这个主题太大而无法覆盖在一个答案中，我强烈建议你去看看这一系列关于“如何绘制和制作动画”的教程一个JavaScript画布“：
https://www.youtube.com/playlist?list=PLpPnRKq7eNW3We9VdCfx9fprhqXHwTPXL
JavaScript画布是一个非常强大的工具。您可以绘制任何您想要的几何形状，可以在其中插入图像和文本，还可以创建2D游戏等等。如果你可以使用ES6 classes的JavaScript画布，你就拥有了一个非常实用的工具！