javascript - 在 Canvas 上显示点

Question

我有点的 JSON 对象。我正在尝试在 Canvas 上绘制这些点。但是代码不起作用。我哪里做错了？

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var t = [{"prevX":39,"prevY":58,"currX":39,"currY":58,"color":"#000000","width":4},{"prevX":40,"prevY":67,"currX":40,"currY":67,"color":"#000000","width":4},{"prevX":41,"prevY":81,"currX":41,"currY":81,"color":"#000000","width":4},{"prevX":44,"prevY":94,"currX":44,"currY":94,"color":"#000000","width":4},{"prevX":46,"prevY":107,"currX":46,"currY":107,"color":"#000000","width":4},{"prevX":46,"prevY":119,"currX":46,"currY":119,"color":"#000000","width":4},{"prevX":49,"prevY":132,"currX":49,"currY":132,"color":"#000000","width":4},{"prevX":52,"prevY":141,"currX":52,"currY":141,"color":"#000000","width":4},{"prevX":54,"prevY":150,"currX":54,"currY":150,"color":"#000000","width":4},{"prevX":61,"prevY":165,"currX":61,"currY":165,"color":"#000000","width":4},{"prevX":63,"prevY":172,"currX":63,"currY":172,"color":"#000000","width":4},{"prevX":65,"prevY":178,"currX":65,"currY":178,"color":"#000000","width":4},{"prevX":66,"prevY":186,"currX":66,"currY":186,"color":"#000000","width":4},{"prevX":68,"prevY":195,"currX":68,"currY":195,"color":"#000000","width":4},{"prevX":70,"prevY":196,"currX":70,"currY":196,"color":"#000000","width":4},{"prevX":70,"prevY":198,"currX":70,"currY":198,"color":"#000000","width":4}];

for(var i=0;i<t.length;i++){
  var d = t[i];
  ctx.beginPath();
  ctx.moveTo(d.prevX, d.prevY);
  ctx.lineTo(d.currX, d.currY);
  ctx.globalAlpha=1;
  ctx.strokeStyle = d.color;
  ctx.lineWidth = d.width;
  ctx.stroke();
  ctx.closePath();
}

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">

Answer 1

您的 JSON 点有 prev 和 curr 作为相同的点。通过快速修复，使用一个条目的 prev 坐标，以及下一个条目的 curr 坐标。您还需要调整 for 循环以防止超出点列表长度。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var t = [{"prevX":32,"prevY":102,"currX":32,"currY":102,"color":"#000000","width":4},{"prevX":32,"prevY":103,"currX":32,"currY":103,"color":"#000000","width":4},{"prevX":32,"prevY":105,"currX":32,"currY":105,"color":"#000000","width":4},{"prevX":32,"prevY":110,"currX":32,"currY":110,"color":"#000000","width":4},{"prevX":32,"prevY":113,"currX":32,"currY":113,"color":"#000000","width":4},{"prevX":32,"prevY":118,"currX":32,"currY":118,"color":"#000000","width":4},{"prevX":32,"prevY":125,"currX":32,"currY":125,"color":"#000000","width":4},{"prevX":32,"prevY":133,"currX":32,"currY":133,"color":"#000000","width":4},{"prevX":32,"prevY":140,"currX":32,"currY":140,"color":"#000000","width":4},{"prevX":32,"prevY":146,"currX":32,"currY":146,"color":"#000000","width":4},{"prevX":32,"prevY":154,"currX":32,"currY":154,"color":"#000000","width":4},{"prevX":32,"prevY":163,"currX":32,"currY":163,"color":"#000000","width":4},{"prevX":32,"prevY":168,"currX":32,"currY":168,"color":"#000000","width":4},{"prevX":32,"prevY":175,"currX":32,"currY":175,"color":"#000000","width":4},{"prevX":32,"prevY":178,"currX":32,"currY":178,"color":"#000000","width":4},{"prevX":32,"prevY":181,"currX":32,"currY":181,"color":"#000000","width":4},{"prevX":32,"prevY":189,"currX":32,"currY":189,"color":"#000000","width":4},{"prevX":32,"prevY":196,"currX":32,"currY":196,"color":"#000000","width":4},{"prevX":32,"prevY":203,"currX":32,"currY":203,"color":"#000000","width":4},{"prevX":32,"prevY":206,"currX":32,"currY":206,"color":"#000000","width":4},{"prevX":32,"prevY":210,"currX":32,"currY":210,"color":"#000000","width":4},{"prevX":32,"prevY":219,"currX":32,"currY":219,"color":"#000000","width":4},{"prevX":32,"prevY":225,"currX":32,"currY":225,"color":"#000000","width":4},{"prevX":32,"prevY":230,"currX":32,"currY":230,"color":"#000000","width":4},{"prevX":32,"prevY":236,"currX":32,"currY":236,"color":"#000000","width":4},{"prevX":32,"prevY":241,"currX":32,"currY":241,"color":"#000000","width":4},{"prevX":32,"prevY":248,"currX":32,"currY":248,"color":"#000000","width":4},{"prevX":32,"prevY":256,"currX":32,"currY":256,"color":"#000000","width":4},{"prevX":32,"prevY":260,"currX":32,"currY":260,"color":"#000000","width":4},{"prevX":32,"prevY":265,"currX":32,"currY":265,"color":"#000000","width":4},{"prevX":32,"prevY":266,"currX":32,"currY":266,"color":"#000000","width":4}];

var t2 =[{"prevX":221,"prevY":103,"currX":221,"currY":103,"color":"#000000","width":4},{"prevX":221,"prevY":106,"currX":221,"currY":106,"color":"#000000","width":4},{"prevX":222,"prevY":110,"currX":222,"currY":110,"color":"#000000","width":4},{"prevX":224,"prevY":115,"currX":224,"currY":115,"color":"#000000","width":4},{"prevX":224,"prevY":121,"currX":224,"currY":121,"color":"#000000","width":4},{"prevX":225,"prevY":126,"currX":225,"currY":126,"color":"#000000","width":4},{"prevX":225,"prevY":133,"currX":225,"currY":133,"color":"#000000","width":4},{"prevX":225,"prevY":146,"currX":225,"currY":146,"color":"#000000","width":4},{"prevX":225,"prevY":152,"currX":225,"currY":152,"color":"#000000","width":4},{"prevX":226,"prevY":162,"currX":226,"currY":162,"color":"#000000","width":4},{"prevX":227,"prevY":172,"currX":227,"currY":172,"color":"#000000","width":4},{"prevX":227,"prevY":178,"currX":227,"currY":178,"color":"#000000","width":4},{"prevX":227,"prevY":190,"currX":227,"currY":190,"color":"#000000","width":4},{"prevX":227,"prevY":199,"currX":227,"currY":199,"color":"#000000","width":4},{"prevX":227,"prevY":212,"currX":227,"currY":212,"color":"#000000","width":4},{"prevX":227,"prevY":227,"currX":227,"currY":227,"color":"#000000","width":4},{"prevX":229,"prevY":234,"currX":229,"currY":234,"color":"#000000","width":4},{"prevX":230,"prevY":242,"currX":230,"currY":242,"color":"#000000","width":4},{"prevX":230,"prevY":248,"currX":230,"currY":248,"color":"#000000","width":4},{"prevX":230,"prevY":252,"currX":230,"currY":252,"color":"#000000","width":4},{"prevX":231,"prevY":256,"currX":231,"currY":256,"color":"#000000","width":4},{"prevX":232,"prevY":260,"currX":232,"currY":260,"color":"#000000","width":4},{"prevX":232,"prevY":261,"currX":232,"currY":261,"color":"#000000","width":4},{"prevX":232,"prevY":262,"currX":232,"currY":262,"color":"#000000","width":4},{"prevX":232,"prevY":263,"currX":232,"currY":263,"color":"#000000","width":4}];

for(var i=0;i<t.length-1;i++){ // t.length-1 to prevent overflow
  var d1 = t[i];   // point1
  var d2 = t[i+1]; // (next) point2
  ctx.beginPath();
  ctx.moveTo(d1.prevX, d1.prevY); // prev from point1
  ctx.lineTo(d2.currX, d2.currY); // curr from point2
  ctx.globalAlpha=1;
  ctx.strokeStyle = d2.color; // use point2 styles
  ctx.lineWidth = d2.width;
  ctx.stroke();
  ctx.closePath();
}

  for(var i=0;i<t2.length-1;i++){ // t2.length-1 to prevent overflow
  var d1 = t2[i];   // point1 from line t2
  var d2 = t2[i+1]; // (next) point2
  ctx.beginPath();
  ctx.moveTo(d1.prevX, d1.prevY); // prev from point1
  ctx.lineTo(d2.currX, d2.currY); // curr from point2
  ctx.globalAlpha=1;
  ctx.strokeStyle = d2.color; // use point2 styles
  ctx.lineWidth = d2.width;
  ctx.stroke();
  ctx.closePath();
}

<canvas id="myCanvas" width="256" height="256" style="border:2px solid #d3d3d3;">