通过坐标数组循环绘制HTML画布上的线

我想通过一个坐标数组循环来在html画布上绘制几行。通过坐标数组循环绘制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>

例子：https://jsfiddle.net/ocrn9L13/

来源

2017-06-10 Adam Bishti

这似乎正好发挥预期。路径之间的距离非常近，以至于它看起来并没有增加任何其他内容（除了从0,0到6.87462062085475,45.9746815056445的第一个跳转 – FrankerZ

有很多次您从外部来源获取一些数据，并且该信息未缩放以适合您的渲染需求。

帮助缩放数据的一种方法是查找范围，即最大和最小x和y坐标。

一旦你有了程度，你可以缩放它以适应任何坐标系。

下面是您的代码修改，以完成我刚才所述的内容。它对数据进行两次传递。首先是找到x，y的最小值和最大值。一旦找到了最小值和最大值，我就可以计算出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>

来源

2017-06-10 03:58:40 Blindman67

的问题是，所有的X-Y坐标的是几乎相同的，他们都基本上是相同的像素位置。

来源

2017-06-10 03:08:42 xunatai

通过坐标数组循环绘制HTML画布上的线

回答

相关问题