在画布上显示点

时间：2018-01-08 07:28:19

标签： javascript canvas

我有点JSON对象。我试图在画布上绘制这些点。但代码不起作用。我在哪里做错了？

＆＃13;
＆＃13; 
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();
}
＆＃13; 
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
＆＃13;
＆＃13;
＆＃13;

2 个答案:

答案 0 :(得分：1)

由于prev和curr点相同，因此该行不可见。相反，您可以使用ctx.arc()来显示积分。

＆＃13;
＆＃13; 
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.arc(d.prevX, d.prevY, 3, 0, 2*Math.PI);
  //ctx.lineTo(d.currX, d.currY);
  //ctx.globalAlpha = 1;
  ctx.strokeStyle = d.color;
  //ctx.lineWidth = d.width;
  ctx.stroke();
  ctx.closePath();

}
＆＃13; 
<canvas id="myCanvas" width="300" height="250" style="border:1px solid #000000;">
＆＃13;
＆＃13;
＆＃13;

制作一个功能并使用它。因为这是一行仅在绘图开始时使用beginPath()，最后使用closePath()来关闭它。

<强> 样本

＆＃13;
＆＃13; 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var t1 = [{"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}];

drawLine(t1);
drawLine(t2);

function drawLine(t){
 ctx.beginPath();
 for (var i = 1; i < t.length; i++) {
  var d1 = t[i-1], d2 = t[i];
  ctx.moveTo(d1.prevX, d1.prevY);
  ctx.lineTo(d2.currX, d2.currY);
  ctx.strokeStyle = d2.color;
  ctx.lineWidth = d2.width;
  ctx.stroke();
 }
 ctx.closePath();
}
＆＃13; 
<canvas id="myCanvas" width="300" height="350" style="border:1px solid #000000;">
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：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;">

相关问题
最新问题