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

在有背景(蓝色)的情况下应该怎么做呢？

我实在是不想用一个setInterval一直刷新画布，太损耗性能了。

请教一下还有没有其他的思路？

原始需求：

AAAAA作为镂空透明色字体，背景为一个正在播放的video，并且video的内容会动态的填充在文字AAAAAA上

AAAAAA的背景要一直展示video的动画效果：

回答

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

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

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

也可以使用CSS3 mask的属性；

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

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

globalCompositeOperation合并图层

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

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);

读文档,仔细看globalCompositeOperation.

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

可以用css的话,就更简单了.

background-clip: text;即可

html 颜色镂空,【前端】canvas应该怎么做镂空（透明色）文字呢？相关推荐

几个用于前端canvas图片查看编辑的js插件
几个用于前端canvas图片查看编辑的js插件 1 tui.image-editor 2 Konva 3 AlloyImage 4 zwibbler 5 canvasPS 6 Photo Editor ...
前端canvas实现图画工具
视频展示前端canvas实现图画工具作者有话说这几天学了canvas标签,在熟悉了canvas的一些属性后我决定做有个关于canvas的一个图画工具.在b站也有看到类似的功能,在看了关于这类程序 ...
前端 Canvas 图像标记
前端 Canvas 图像标记作者:@ 很菜的小白在分享日期:2021年12月22日介绍为什么要做图像标记?我们开发过程可能会涉及到需要在一张图片上做记号,例如:人脸识别,我们可能需要将识别到的 ...
前端项目课程6 做酒仙网顶部注意事项有哪些
前端项目课程6 做酒仙网顶部注意事项有哪些一.总结一句话总结: 1.css样式代码搁在那? 先搁在本页面,后面很多的时候在一次剪过去 2.如何给页面部分的什么ceo邮箱.社区.电话等字体变成红色? ...
前端 canvas toDataURL() 转图片生成空白图片问题
这里写自定义目录标题前端 canvas toDataUrl() 转图片生成空白图片问题感谢大神解决方法问题发生解决办法原理 vue项目中的使用总结 2022-05-17追加修改前端 ca ...
Web前端开发三剑客是做什么的？
大家都熟知,Web前端开发三剑客就是HTML.CSS.JavaScript.通过三种技术的融合产生了各式各样的网站.那Web前端开发三剑客分别是做什么的呢?主要在网站开发中主要完成哪些动作? Web前 ...
web前端开发工程师是做什么工作的？
web前端开发工程师是做什么工作的? Web前端开发工程师是一个很新的职业,在国内乃至国际上真正开始受到重视的时间不超过10年.Web前端开发是从网页制作演变而来的,名称上有很明显的时代特征.在互联网 ...
Web前端：前端开发人员是做什么的?
我们浏览的所有网站,我们购买商品的电子商务网站,我们阅读的博客等等,都被前端开发人员做得既人性化又美观. 在构建网站和web应用程序时,需要考虑web开发的两个主要方面:前端和后端. 顾名思义,前端开 ...
要成为一个好的前端架构师需要做的事情
要成为一个好的前端架构师需要做的事情: 了解业务:全面调研当前业务和竞品的现状,充分理解当前渲染链路和节点,确认当前存在的问题寻找方案:预估未来发展的方向,尽可能多的了解相关解决方案或创新自己的方案 ...

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

html 颜色镂空,【前端】canvas应该怎么做镂空（透明色）文字呢？相关推荐

最新文章

热门文章