【前端】canvas应该怎么做镂空（透明色）文字呢？

在有背景（蓝色）的情况下应该怎么做呢？
我实在是不想用一个setInterval一直刷新画布，太损耗性能了。
请教一下还有没有其他的思路？

原始需求：
AAAAA作为镂空透明色字体，背景为一个正在播放的video，并且video的内容会动态的填充在文字AAAAAA上
【前端】canvas应该怎么做镂空（透明色）文字呢？

AAAAAA的背景要一直展示video的动画效果：
【前端】canvas应该怎么做镂空（透明色）文字呢？

回答

canvas做视频的思路，我了解的方法就是使用定时器或者requestAnimationFrame来抓取video的每一帧作为源来画图。

如果你不想用这种方法，针对你的原始需求，有一种更简单的

  • 直接可以在video上层放一个同宽同高的遮罩层图片，图片背景是蓝色，A字部分是透明的那种，就完全可以实现你这需求。

  • 也可以使用CSS3 mask的属性；

  • 当然你也可是使用canvas把这个遮罩层画出来，图片背景是蓝色，A字部分是透明。

    • 可以使用path，按照想要的范围画出来，再fill。（麻烦）

    • globalCompositeOperation合并图层

根据下面的童鞋思路 补充：

【前端】canvas应该怎么做镂空（透明色）文字呢？

    <script>
        var c = document.getElementById('myCanvas')
        var cvsCtx = c.getContext('2d')
        cvsCtx.fillStyle = 'blue';
        cvsCtx.fillRect(0, 0, 500, 200);
        cvsCtx.globalCompositeOperation = "destination-out";
        cvsCtx.font = '150px serif';
        cvsCtx.fillStyle = 'red';
        cvsCtx.fillText('AAAAA', 0, 150);
    </script>

读文档,仔细看globalCompositeOperation.

用destination-out将aaa图层与背景层合成即可.

可以用css的话,就更简单了.
background-clip: text;即可

video上面放个背景图不行吗？？？https://www.lilnong.top/stati...

以上是 【前端】canvas应该怎么做镂空（透明色）文字呢？ 的全部内容， 来源链接： utcz.com/a/80645.html

回到顶部