我正在尝试通过HTML5 canvas。我设法在画布上绘制，但我需要动态地进行绘制。这是我的JavaScript代码：
var c=document.getElementById("yellow");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(247,373);
ctx.lineTo(0,390);
ctx.lineTo(5,21);
ctx.lineTo(245,0);
ctx.lineTo(247,373);
ctx.closePath();
ctx.fillStyle="#ffca05";
ctx.globalAlpha=0.7;
ctx.strokeStyle = '#ffca05';
ctx.fill();
ctx.stroke();
我需要从中读取数据json array并使用这些坐标进行绘制。
[{"x":"247", "y":"373"}, {"x":"0", "y":"390"},{"x":"5", "y":"21"},{"x":"245", "y":"0"}, {"x":"247", "y":"373"}]
您要做的就是循环遍历JS对象for并重复执行ctx.lineTo()。注意：ctx.lineTo()a之后的第一个ctx.beginPath()行为类似于ctx.moveTo()。
您可以运行以下代码片段来验证结果：
var c=document.getElementById("yellow");
var ctx=c.getContext("2d");
var json=[
{"x":"247", "y":"373"},
{"x":"0", "y":"390"},
{"x":"5", "y":"21" },
{"x":"245", "y":"0" },
{"x":"247", "y":"373"}
];
ctx.beginPath();
for(var i in json){
ctx.lineTo(json[i].x,json[i].y);
}
ctx.closePath();
ctx.fillStyle="#ffca05";
ctx.globalAlpha=0.7;
ctx.strokeStyle="#ffca05";
ctx.fill();
ctx.stroke();<canvas id="yellow" width="250" height="400"></canvas>PS：我可以注意到，画布顶部边缘的上角（大概也是左边的角）被切除了。只需1向每个坐标添加左右即可解决此问题：
[
{"x":"248", "y":"374"},
{"x":"1", "y":"391"},
{"x":"6", "y":"22" },
{"x":"246", "y":"1" },
{"x":"248", "y":"374"}
];
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句