我正在尝试循环遍历坐标数组以在html画布上绘制几行。
似乎每条线都是相互重叠绘制的，并且该线不是从循环中的新坐标开始的。
var c = document.getElementById("lineCanvas");
var ctx = c.getContext("2d");
var data = [
[
[
6.87462062085475,
45.9746815056445,
2494.80004882813
],
[
6.87473799526779,
45.9772917433492,
2517.48754882813
]
],
[
[
6.87473461365077,
45.9772995683242,
2517.2578125
],
[
6.8736121249999,
45.9779670155837,
2542.50024414063
],
[
6.87299210781629,
45.9781103097697,
2579.26586914063
],
[
6.87223679891952,
45.9780976249557,
2623.55834960938
],
[
6.87169006623871,
45.9782141639712,
2674.02709960938
],
[
6.87133154968397,
45.9781620504641,
2706.29272460938
],
[
6.87084326975906,
45.9784539456999,
2685.76708984375
],
[
6.87055838217719,
45.9797052404885,
2641.150390625
],
[
6.86775431929958,
45.9838701463132,
2541.81811523438
],
[
6.86677434685096,
45.9850426033623,
2518.7724609375
],
[
6.86471620539337,
45.9859078090035,
2482.7353515625
],
[
6.86083954284208,
45.9857654302634,
2422.5908203125
],
[
6.85678792479354,
45.9856953809239,
2334.52661132813
],
[
6.85371440538845,
45.9861255880752,
2300.64892578125
],
[
6.85374919591106,
45.987623548574,
2328.4541015625
],
[
6.85538813707532,
45.9885247948691,
2368.02124023438
],
[
6.8571299935713,
45.9893949398974,
2430.18969726563
],
[
6.85762330877777,
45.9903535872519,
2444.35400390625
],
[
6.85792368848341,
45.991104963556,
2470.85522460938
],
[
6.86062047783254,
45.9926610042636,
2358.318359375
],
[
6.86367918950193,
45.9952411154904,
2238.4580078125
],
[
6.86651311990744,
45.9958393525819,
2198.28515625
],
[
6.86802868822584,
45.9967659531001,
2163.53515625
],
[
6.86890726501023,
45.9985394379416,
2082.47192382813
],
[
6.86946764936131,
45.9989288273475,
2065.57006835938
]
]
];
var previous = [0, 0];
$.each(data, function( index, value ) {
$.each(value, function( index, value ) {
ctx.moveTo(previous[0], previous[1]);
ctx.lineTo(value[0], value[1]);
ctx.stroke();
previous = value;
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>
答案 0 :(得分：2)
问题是你的所有x-y坐标几乎相同，它们基本上都是相同的像素位置。
答案 1 :(得分：1)
很多时候，您从外部源获取一些数据，并且该信息不会缩放以满足您的渲染需求。
帮助缩放数据的一种方法是找到范围，即最大和最小x和y坐标。
一旦你有了范围，你可以缩放它以适应任何坐标系。
以下是您修改的代码，用于执行上述操作。它对数据进行了两次传递。第一个是找到x，y的最小值和最大值。找到min和max后，我计算x，y的范围，然后平移和缩放数据以适应画布，随时渲染点。
使用x，y范围之外的最大范围来标准化坐标和最小宽度或画布的高度，以按比例放大（或缩小）以适合画布。在规范化和缩放之前，将minx，miny位置转换为0,0。请参阅分步过程的代码。
var c = lineCanvas;
var ctx = c.getContext("2d");
var data = [
[
[
6.87462062085475,
45.9746815056445,
2494.80004882813
],
[
6.87473799526779,
45.9772917433492,
2517.48754882813
]
],
[
[
6.87473461365077,
45.9772995683242,
2517.2578125
],
[
6.8736121249999,
45.9779670155837,
2542.50024414063
],
[
6.87299210781629,
45.9781103097697,
2579.26586914063
],
[
6.87223679891952,
45.9780976249557,
2623.55834960938
],
[
6.87169006623871,
45.9782141639712,
2674.02709960938
],
[
6.87133154968397,
45.9781620504641,
2706.29272460938
],
[
6.87084326975906,
45.9784539456999,
2685.76708984375
],
[
6.87055838217719,
45.9797052404885,
2641.150390625
],
[
6.86775431929958,
45.9838701463132,
2541.81811523438
],
[
6.86677434685096,
45.9850426033623,
2518.7724609375
],
[
6.86471620539337,
45.9859078090035,
2482.7353515625
],
[
6.86083954284208,
45.9857654302634,
2422.5908203125
],
[
6.85678792479354,
45.9856953809239,
2334.52661132813
],
[
6.85371440538845,
45.9861255880752,
2300.64892578125
],
[
6.85374919591106,
45.987623548574,
2328.4541015625
],
[
6.85538813707532,
45.9885247948691,
2368.02124023438
],
[
6.8571299935713,
45.9893949398974,
2430.18969726563
],
[
6.85762330877777,
45.9903535872519,
2444.35400390625
],
[
6.85792368848341,
45.991104963556,
2470.85522460938
],
[
6.86062047783254,
45.9926610042636,
2358.318359375
],
[
6.86367918950193,
45.9952411154904,
2238.4580078125
],
[
6.86651311990744,
45.9958393525819,
2198.28515625
],
[
6.86802868822584,
45.9967659531001,
2163.53515625
],
[
6.86890726501023,
45.9985394379416,
2082.47192382813
],
[
6.86946764936131,
45.9989288273475,
2065.57006835938
]
]
];
var minx,miny,maxx,maxy;
miny = minx = Infinity
maxx = maxy = -Infinity;
data.forEach(dat => {
dat.forEach(point => {
minx = Math.min(minx,point[0]);
miny = Math.min(miny,point[1]);
maxx = Math.max(maxx,point[0]);
maxy = Math.max(maxy,point[1]);
});
});
var rangeX = maxx - minx;
var rangeY = maxy - miny;
var range = Math.max(rangeX,rangeY);
var scale = Math.min(c.width,c.height);
data.forEach(dat => {
ctx.beginPath();
dat.forEach(point => {
var x = point[0];
var y = point[1];
x = ((x-minx) / range) * scale;
y = ((y-miny) / range) * scale;
ctx.lineTo(x,y);
});
ctx.stroke();
});
<canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"></canvas>