网页添加水印js方法
2019-02-25 15:16
190 查看
function addWaterMarker(str){ var can = document.createElement('canvas'); var body = document.body; body.appendChild(can); can.width=400; //画布的宽 can.height=200;//画布的高度 can.style.display='none'; var cans = can.getContext('2d'); cans.rotate(-20*Math.PI/180); //画布里面文字的旋转角度 cans.font = "16px Microsoft JhengHei"; //画布里面文字的字体 cans.fillStyle = "rgba(17, 17, 17, 0.50)";//画布里面文字的颜色 cans.textAlign = 'left'; //画布里面文字的水平位置 cans.textBaseline = 'Middle'; //画布里面文字的垂直位置 cans.fillText(str,can.width/3,can.height/2); //画布里面文字的间距比例 body.style.backgroundImage="url("+can.toDataURL("image/png")+")"; //把画布插入到body中 } addWaterMarker("水印");
此方法水印只能显示在内容元素外围,如需显示在元素内,需要把背景插入到需求元素上并进行z-index权值设定
相关文章推荐
- asp.net动态添加js文件调用到网页的方法
- 使用JS为网页添加文字水印
- JS给网页添加水印
- js网页添加水印
- asp.net动态添加js文件调用到网页的方法
- js实现完全自定义可带多级目录的网页鼠标右键菜单方法
- js添加select下默认的option的value和text的方法
- 用什么方法给PDF文件添加水印呢?
- 【笔记】js原生方法 在元素外部或内部实现添加元素功能(类似jq 的 insert 和 append)
- JS防止网页被嵌入iframe框架的方法分析
- js实现为a标签添加事件的方法(使用闭包循环)
- js实现横向百叶窗效果网页切换动画效果的方法
- 给Chrome和Firefox添加js脚本作为插件的方法
- Aspjpeg添加水印完整方法
- JS给Textarea文本框添加行号的方法
- asp .net 为图片添加文字水印(内包含有加图片水印的方法,但尚未完善暂不能使用)
- Asp.Net网页头部动态加载标题、描述、关键字、css和js文件的方法
- JS设置网页图片vspace和hspace属性的方法
- JS文件中的中文在网页上显示为乱码解决方法
- 网页数据传输加密方法(前js+后java)