Question

我正在测试一些Canvas编程，我对如何在绘制新路径时清除以前的路径提出疑问。

实施例：绘制一个没有笔划和描边线的实心圆。我有以下代码：

graphicContext.save();
graphicContext.beginPath();
graphicContext.arc(95,50,40,0,2*Math.PI);
graphicContext.fillStyle="rgb(50, 200, 200)";
graphicContext.fill();
graphicContext.restore();

graphicContext.save();
graphicContext.moveTo(0,0);
graphicContext.lineTo(200,100);
graphicContext.stroke();
graphicContext.restore();

然而，圆圈和直线都被抚摸。如何在不勾选圆圈的情况下划线？

Answer 1

首先，无需使用save和restore方法。

其次，在绘制线条之前使用beginPath方法，因为您正在创建新路径。 beginPath将重置/清除之前的路径......

var graphicContext = document.querySelector('#canvas').getContext('2d')

// circle
graphicContext.beginPath();
graphicContext.arc(95,50,40,0,2*Math.PI);
graphicContext.fillStyle="rgb(50, 200, 200)";
graphicContext.fill();

// line
graphicContext.beginPath();
graphicContext.moveTo(0,0);
graphicContext.lineTo(200,100);
graphicContext.stroke();

<canvas id="canvas"></canvas>

画布javascript清晰路径

1 个答案: