使用canvas生成水印watermark，有详细注释，简单易懂

大家好，我是小梅，公众号：「小梅的前端之路」原创作者。

作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。

直接上代码，生成水印的js文件：

// const watermark = {}
// 定义设置水印的方法，
const watermarkFun = () => {// 如果水印元素已经存在就先移走，重新生成, id要是全局独一无二的const id = '3.14159261111'if (document.getElementById(id) !== null) {document.body.removeChild(document.getElementById(id))}// 第一步：生成cavas元素，使用canvas, 绘制水印const str = '我是水印ya'const canvasEle = document.createElement('canvas')// 设置单个水印元素的宽高，这决定了页面水印的密度，需要更具水印文字的大小以及长度设置合理的值canvasEle.width = 200canvasEle.height = 100const ctx = canvasEle.getContext('2d') // 绘制2d图形ctx.rotate(-20 * Math.PI / 180)// 设置水印元素的倾斜, 这一行代码要写在设置水印文字之前，涉及样式的都写在设置水印文字之前ctx.font = '16px serif' // 设置水印文字的大小和字体ctx.fillStyle = 'rgba(200, 200, 200, 0.8)' // 设置水印文字的颜色ctx.textAlign = 'left' // 文本左对齐ctx.fillText(str, canvasEle.width / 16, canvasEle.height / 2) // 设置水印文字// 第二步：把canvas转化为一张图片，作为背景图，添加到divconst divEle = document.createElement('div')divEle.id = iddivEle.style.width = document.documentElement.clientWidth - 10 + 'px' // 设置div元素的宽高divEle.style.height = document.documentElement.clientHeight - 20 + 'px'divEle.style.pointerEvents = 'none' // 元素永远不会成为鼠标事件的targetdivEle.style.position = 'fixed' // 固定定位, 让元素撑满整个可视区域divEle.style.top = '3px'divEle.style.left = '5px'divEle.style.background = 'url(' + canvasEle.toDataURL() + ') left top repeat' // 水印图片做div的背景,并且重复，这样看起来就是满屏都是水印divEle.style.zIndex = 999999 // 水印元素的权值设得大一些，以此来遮盖所有的元素// 第三步：div添加到body元素，水印生成document.body.appendChild(divEle)return id
}
// 设置水印，就调用这个方法
watermarkFun()
// 页面发生缩放，重绘水印
window.onresize = () => {watermarkFun()
}
// watermark.set = () => {
//   watermarkFun()
//   // 页面发生缩放，重绘水印
//   window.onresize = () => {
//     watermarkFun()
//   }
// }
// export default watermark

引用水印js的html文件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
243254
<div style="margin-top: 200px; margin-left: 500px;">hhhsdf<button onclick="alert('do click')">dianji</button>
</div>
<script src="./test11.js"></script>
<!--<script type="module">-->
<!--import watermark from './test11.js';--><!--  console.log(123, watermark.set())-->
<!--</script>-->
</body>
</html>

页面效果图：

❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅，有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知，一起沟通、学习成长呀。

使用canvas生成水印watermark，有详细注释，简单易懂相关推荐

一、css清除浮动方法学习笔记总结（超详细，简单易懂）
** css清除浮动方法学习笔记总结(超详细,简单易懂) ** 问题: 上图中,由于container(父级元素)未设置高度,其内部子元素设置了float浮动,导致与container同级(也就是co ...
下料问题的列生成算法，matlab代码，简单易懂
下料问题的列生成算法,matlab代码,简单易懂 ID:18300606016240721绿兔叽
python 抖音评论_新手python抖音无水印解析带详细注释
资源来源网络,如果需要授权,请大家更换源码,模块仅供学习,如需商用请购买正版授权,本栏目不提供技术服务,积分不够请签到,或者会员中心投稿源码注释都很详细,可以看看注释!友情提醒,仅供学习使用,请勿用 ...
原生JS Canvas 粒子漂浮效果（详细注释）
其实用Canvas 实现粒子效果很简单. 知道 Canvas 怎么画出圆形( arc 函数 ), 圆形的移动就是 arc 函数定位参数变化的问题. // x.y 变化并且每帧重绘 ,让我们看 ...
JS 验证码生成及校验（详细注释）
这是个非常简单的(粗糙)模拟验证码生成及校验的小案例,只简单的实现下功能,后续希望可以做验证码背景是有颗粒的,同时有干扰线...更符合实际场景的验证码生成及校验. 完整代码如下: <!DOCTY ...
冒泡法排序(详细注释，易懂）
描述输入10个整数,用冒泡法对他们进行从大到小排序并输出.‪‬‪‬‪‬‪‬‪‬‮‬‭‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‪‬‪‬‪‬‪‬ ...
二、前端pink老师的CSS定位学习笔记（超详细，简单易懂）
定位(position) 1. CSS 布局的三种机制网页布局的核心 -- 就是用 CSS 来摆放盒子位置. CSS 提供了 3 种机制来设置盒子的摆放位置,分别是普通流.浮动和定位,其中: 普通流 ...
用itchat导入微信好友信息并保存（详细）简单易懂
前言之前在blink发了一条说说(可以去我主页看),后来想想虽然是一个small white
rtl8811au黑苹果10.15_超简单的黑苹果系统安装教程，步骤超详细，简单易懂
苹果系统由于经过专门的优化,比Windows要好用得多,而且MAC系统软件基本没有广告,没有流氓软件,而且显示效果特别棒,对于我们工作和生活是个很好的生产工具,但是在MAC电脑的高昂售价面前,很多朋友 ...

使用canvas生成水印watermark，有详细注释，简单易懂

使用canvas生成水印watermark，有详细注释，简单易懂相关推荐

最新文章

热门文章