HTML5 Canvas重复绘制两次，如何重新绘制第一次的线条？

Question

我希望用一种颜色画一条线，用另一种颜色画下一条线。但是当我第二次调用stroke()时，第一条线会再次画出！我该怎么避免这种情况？以下是我的代码：

var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.strokeStyle = "#FF0000";
ctx.stroke();
ctx.moveTo(100,100);
ctx.lineTo(100,200);
ctx.strokeStyle = "#999999";
ctx.stroke();

提前感谢！

- Rodrigo

Answer 1

只需在其中插入beginPath()即可：

var canv = document.getElementById("canvas");
var ctx = canv.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.strokeStyle = "#FF0000";
ctx.stroke();

cxt.beginPath();   // <---
ctx.moveTo(100,100);
ctx.lineTo(100,200);
ctx.strokeStyle = "#999999";
ctx.stroke();

这将重置你的路径。一次绘制只会描绘出路径上已经存在的内容，但不会清除它。你需要为每个想要绘制的新形状手动重置路径。

优点是可以重复使用路径进行填充、剪切和点测试。缺点是有时很容易忘记重置路径。

- user1693593