javascript - 使用 html5 canvas 绘制一个切边的圆

Question

我正在尝试画一个切边的圆，看起来有点像这样:

我的第一个方法是只画一个描边圆并在侧面执行clearRect - 但我想渲染其中许多彼此相邻的元素，并且我无法清除 Canvas 上已经绘制的内容。

var size = 100;
c.save();
c.strokeStyle = '#ff0000';
c.lineWidth = 50;
c.beginPath();
c.arc(0, 0, size - c.lineWidth / 2, 0, Math.PI * 2);
c.closePath();
c.stroke();

// clear rects on each side to get this effect

c.restore();

有没有办法限制弧线不进一步绘制，或者有没有办法以某种方式清除我的小形状，然后将其添加到主 Canvas ？

我不喜欢将多个 Canvas 元素叠加在一起的想法。

Answer 1

只需添加一个剪辑蒙版即可:

DEMO

c.save();

/// define clip    
c.beginPath();
c.rect(120, 120, 160, 160);
c.clip();

/// next drawn will be clipped    
c.beginPath();
c.arc(200, 200, size - c.lineWidth / 2, 0, Math.PI * 2);
c.closePath();
c.stroke();

// clear rects on each side to get this effect
/// and remove clipping mask
c.restore();

clip()方法使用当前定义的路径来剪辑下一个绘制的图形。