vue怎么去掉vue水印,如何去除vue的水印
这篇文章主要介绍了某视频剪辑软件使用班级创建和清除水印的示例代码，帮助大家更好的理解和使用某视频剪辑软件框架，感兴趣的朋友可以了解下
页面添加水印的方法有很多，以下举例使用班级定义的方法进行水印内容渲染：
1、新建文件：WatermarkClass.js
导出默认类别水印类别{
构造函数({id=watermarkID ，str= ，fontSize=18，width=400，height=400，fillStyle=#333333 ，opacity=1 }) {
this.id=id
this.str=str
这个。字体大小=字号；
this.width=宽度；
this.height=高度；
this.fillStyle=fillStyle
this.opacity=不透明度；
}
//绘制水印
draw() {
如果(文档。getelementbyid(这个。id)！==null) {
文档。身体。移除子文档。getelementbyid(这个。id))；
}
const canvas=文档。createelement(“canvas”)；
//设置帆布画布大小
画布。宽度=this .宽度
画布。身高=这个。身高；
康斯特CTX=帆布。获取上下文(“2d”)；
ctx.rotate(-(15 *数学.)/180)；//水印旋转角度
CTX。font=` $ { this。font size } px ve Dana `；
CTX。填充样式=this。填充样式；
ctx.textAlign= center
ctx.textBaseline= middle
this.str.split(，).forEach((项目，索引)={
ctx.fillText(item，canvas.width/2，canvas。身高/2(指数*这个。字号10))；//水印在画布的位置x，y轴
});
const div=文档。createelement( div )；
div。id=这个。id；
div。风格。指针事件=“无”；
div。风格。top= 30px
div。风格。left= 10px
div。风格。不透明=这个。不透明；
div。风格。position=‘固定’；
div。风格。zindex= 999999
div。风格。width=` $ { document。文档元素。客户端宽度} px `；
div。风格。height=` $ { document。文档元素。客户端高度} px `；
div。风格。background=` URL($ { canvas。toda taurl( image/png )})左上重复`;
文档。身体。appendchild(div)；
}
setOptions({fontSize=18，width=300，height=300，opacity=1，str=}) {
这个。字体大小=字号；
this.width=宽度；
this.height=高度；
this.fillStyle=fillStyle
this.opacity=不透明度；
this.str=str
这个。draw()；
}
//绘制
render() {
这个。draw()；
window.onresize=()={
这个。draw()；
};
}
//移除水印
removeWatermark() {
如果(文档。getelementbyid(这个。id)！==null) {
文档。身体。移除子文档。getelementbyid(这个。id))；
}
}
}
2、在页面种引入使用：
从" @/libs/watermarkClass "导入水印类；
导出默认值{
名称："应用程序",
已安装：函数(){
this.initWatermark()
},
方法：{
initWatermark() {
//方法一
let watermark=新的水印类({
ID:"水印id”，
字符串： 紫藤萝-水印类别，
fontSize: 20，
宽度：300,
身高：200,
填充样式：" # dddddd "，
不透明度：0.4,
});
水印。render()；
//5秒后，清除水印
setTimeout(()={
水印。删除水印()；
}, 5000);
}
},
};
以上就是某视频剪辑软件使用班级创建和清除水印的示例代码的详细内容，更多关于某视频剪辑软件创建和清除水印的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。