我如何填充画布而不是圆圈答案

【问题标题】：How can i fill canvas other than circle我如何填充画布而不是圆圈
【发布时间】：2018-06-11 06:01:28
【问题描述】：

我想用黑色填充画布。我使用下面的代码来填充画布。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle='rgba(0,0,0,0.1)';
ctx.fillRect(0,0,c.width,c.height);

我有一个需要在画布上画一个圆圈的需求。我用下面的代码画了一个圆圈。

ctx.lineWidth = 10;
ctx.strokeStyle='red';
ctx.arc(150,75,50,0,2*Math.PI,false);
ctx.stroke();

我在画布元素下有一个视频标签。我想通过圆圈显示视频。我不想填满圆圈，因为如果我们填满圆圈，我们就无法显示视频。除了我想填充的圆圈。我用透明颜色填充了圆圈，但它没有显示视频。它显示了填充到画布上的颜色。

我的要求是我必须通过圆圈显示视频。

请帮助我如何实现这一目标。

【问题讨论】：

可以先填矩形，再填圆
我正在做同样的事情，我先填充矩形，然后再画圈。我想将透明颜色应用于圆形。如果我应用透明颜色，则显示填充为 rect 的颜色。我的要求是我想通过圆圈显示画布下的元素。

【解决方案1】：

只需将ctx.stroke() 更改为ctx.fill()，详情请参阅此页面：https://www.w3schools.com/tags/canvas_fill.asp

【讨论】：