Javascript 设置JSON生成的HTML画布线段的颜色

我正在研究如何在HTML画布上生成一行，该画布由几个不同颜色的线段组成，其中的数据来自JSON。我在这里看到了这篇文章：我已经成功地创建了一个生成线条的示例，但是线段并没有保留其预期的颜色。整条线的颜色由最终线段（红色）的颜色决定

列车控制
#画布{边框：1px纯黑；}
函数initCanvas（）{
var ctx=document.getElementById（“画布”）.getContext（“2d”）；
var json=[
{“x”：“200”，“y”：“100”，“颜色”：“蓝色”}，
{“x”：“250”，“y”：“50”，“颜色”：“黑色”}，
{“x”：“350”，“y”：“50”，“颜色”：“黄色”}，
{“x”：“400”，“y”：“100”，“颜色”：“紫色”}，
{“x”：“500”，“y”：“100”，“颜色”：“红色”}
]
ctx.beginPath（）；
ctx.moveTo（100100）；
for（var i=0；i

我已经使用Chrome的开发工具逐步完成了代码，每个线段都显示了正确的颜色，但在创建下一个线段时会发生变化。无论我使用名称颜色还是十六进制等效颜色，都会发生这种情况。使用HTML画布上的行可以做我想做的事情吗？或者这是不可能的？如果是这样的话，我怎样才能做我想做的事

---

感谢您的时间和建议。

正如我在评论中所说，您应该调用ctx.beginPath（）；在for循环结束时。为了应用不同的颜色，必须使用多个路径

.
.
.

for(var i=0; i < json.length; i++){
   ctx.lineTo(json[i].x, json[i].y);
   ctx.strokeStyle = json[i].color;
   ctx.stroke();
   ctx.beginPath();
}

。
.
.
for（var i=0；i

您应该调用ctx.beginPath（）；在for循环结束时。为了应用不同的颜色，您必须使用多个路径。谢谢您的推荐。我已经做了您建议的更改，但是当我直接在Chrome、Firefox或Internet Explorer中打开文件时，创建多色线不起作用。我想知道这是否与我没有使用web服务器有关，所以我在那里加载了文件，并再次使用Chrome、FF和IE访问了它。在每种情况下，仅创建第一条线段（水平蓝线）。使用开发人员工具单步执行代码只显示此段，并且控制台中没有错误。还有其他建议吗？

.
.
.

for(var i=0; i < json.length; i++){
   ctx.lineTo(json[i].x, json[i].y);
   ctx.strokeStyle = json[i].color;
   ctx.stroke();
   ctx.beginPath();
}