Javascript HTML5实时视频画布形状

我正在尝试为HTML5直播视频创建一个圆形框架（或画布）。我可以使用keyframes 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>

视频，画布{
z指数：1；
位置：绝对位置；
排名前10%；
左：25%；
-webkit边界半径：50%；
-moz边界半径：50%；
-ms边界半径：50%；
边界半径：50%；
溢出：隐藏；
}

---

最好为视频设置一个圆形遮罩，而不是改变纵横比，以便视频被压扁。谢谢

分别设置包含div和视频元素的样式。添加一个-webkit掩码图像 到包含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>

看看它是否有效：）