javascript - 如何在画布元素中切割圆圈

Question

我想从透明设置为的画布矩形中剪切透明圆圈rgba(0,0,0,0.7)。当我试图切割圆圈时，里面的图形路径是灰色的。画布在图片上方。附加了预期的行为。

灰色圆圈图：

预期圈子：

我的 JS 代码：

context.save()  
context.fillStyle = "rgba(0,0,0,0.7)"
context.fillRect(0,0, 700, 100)
context.save()
context.globalCompositeOperation= "destination-out"
context.beginPath()
context.arc(400,100, 100, 0, 2 * Math.PI, false)
context.fill()
context.restore()

标签： javascriptimage-processingcanvas