画布javascript清除路径

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>