HTML5实时视频画布形状

Question

我正在尝试为实时HTML5视频创建圆形框架（或画布）。 我可以使用关键帧的radius属性使拐角弯曲，但这使我留下椭圆形而不是圆形。

理想情况下，我将能够使用div对象（png图像）作为视频的蒙版。 话虽如此，div对象只是一个圆圈，所以我也很乐意使用圆圈来遮罩视频。

这是我当前的代码：

<style>
  video, canvas {
        z-index: 1;
        position: absolute;
        top: 10%;
        left: 25%;
        -webkit-border-radius: 50%; 
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        overflow: hidden; 
  }
</style>
<video id="video" width="600" height="450" preload autoplay loop muted controls></video>
<canvas id="canvas" width="600" height="600"></canvas>

最好为视频获取一个圆形的蒙版，而不是更改纵横比收音机，以使视频被压缩。 谢谢！

Answer 1

分别设置包含div和video元素的样式。 将-webkit-mask-image添加到包含的div中。

-webkit-mask-image CSS属性设置元素的遮罩图像。 遮罩图像会根据遮罩图像的透明度来裁剪元素的可见部分。

CSS

.canvas {
   width: 600px;
   height: 600px;
   border-radius: 300px;
   -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
}

video {
   width: 600px;
   height: 600px;
   position: absolute;
   top: -125px;
   left: -125px;
}

HTML

<div class="canvas">
    <video id="video" preload autoplay loop muted controls></video>
</div>

看看是否有效:)