我正在尝试为实时 HTML5 视频创建圆形框架(或 Canvas )。我可以使用关键帧 radius 属性来 flex 拐 Angular ,但这会给我留下一个椭圆形,而不是圆形。
理想情况下,我可以使用 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>
最好为视频设置一个圆形 mask ,而不是更改宽高比,这样视频就会被压扁。谢谢!
最佳答案
分别设置包含的 div 和视频元素的样式。添加 -webkit-mask-image 到包含的 div。
The -webkit-mask-image CSS property sets the mask image for an element. A mask image clips the visible portion of an element according to the mask image's transparency.
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>
看看它是否有效:)
关于javascript - HTML5 实时视频 Canvas 形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43416601/