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();

提前致谢！

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();

这会重置你的路径。中风只会触发路径上存在的内容，但不会清除它。您必须手动重置要绘制的每个新形状的路径。

优点是您可以重复使用填充，剪辑和点测试的路径。缺点是有时候很容易忘记。

html5画布笔画再次绘制第一笔画

1 个答案: