在画布上显示点 [英] Show points on canvas
本文介绍了在画布上显示点的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有要点的JSON对象。我试图在画布上画这些点。但是代码不起作用。我在哪里做错了？
I have JSON object of points. I am trying to paint that points on canvas. But code is not working. Where I am doing wrong?
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;">
推荐答案
您的JSON点具有上一个和 curr 作为相同点。快速修复后，使用上一个坐标，然后使用下一个 curr 坐标。您还需要调整 for 循环，以防止超出点列表的长度。
Your JSON points have prev and curr as the same points. With a quick fix, use the prev coordinates from one entry, and the curr coordinates from the next. You will also need to adjust the for loop to prevent overruning the points list length.
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;">
这篇关于在画布上显示点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
