使用html5画布绘制一个切边的圆圈

Question

我正在尝试绘制一个切边的圆圈，看起来有点像这样：

我的第一种方法是画一个笔画圈并在两侧做clearRect - 但是我想让它们中的许多彼此相邻，我不能清楚已经在画布上绘制的内容。 / p>

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

有没有办法限制弧线不能进一步绘制，还是有办法以某种方式清除我的小形状，然后将其添加到主画布中？

我并不热衷于将多个画布元素叠加在一起。

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() method使用当前定义的路径剪辑下一个绘制的图形。