在HTML5 Canvas中创建线条

Question

我需要制作与不同颜色的线条相连的路径，但是当我指定最后一种颜色时，整个路径变成单一颜色。 lines assignment

我的代码是

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');

ctx.strokeStyle="#f00";
ctx.lineWidth=5;
ctx.moveTo(100,100);
ctx.lineTo(150,150);
ctx.stroke();
ctx.strokeStyle="#0f0";
ctx.moveTo(150,150);
ctx.lineTo(350,200);
ctx.stroke();
ctx.strokeStyle="#00f";
ctx.moveTo(350,200);
ctx.lineTo(400,400);
ctx.stroke();

Answer 1

您必须致电ctx.beginPath()以开始每个画布路径，即

var canvas=document.getElementById("mycanvas");
var ctx=canvas.getContext('2d');

ctx.beginPath();
ctx.strokeStyle="#f00";
ctx.lineWidth=5;
ctx.moveTo(100,100);
ctx.lineTo(150,150);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle="#0f0";
ctx.moveTo(150,150);
ctx.lineTo(350,200);
ctx.stroke();

ctx.beginPath();
ctx.strokeStyle="#00f";
ctx.moveTo(350,200);
ctx.lineTo(400,400);
ctx.stroke();