⽹页设计html最简单⽔印⽅法，前端canvas⽔印快速制作（附
完整代码）
两种⽔印效果如图：
原理解析：
图⼀斜纹类：创建⼀个和页⾯⼀样⼤的画布，根据页⾯⼤⼩以及倾斜⾓度⼤致铺满⽔印⽂字，最后转化为⼀张图⽚设为背景
图⼆倾斜类：将⽂字倾斜后转化为图⽚，然后设置背景图⽚repeat填充整个页⾯
代码分析：
这⾥我只简略分析图⼀斜纹类，事实上这两种⽅式都较为简单，不需要特别强的canvas基础，只需⼤概了解就⾏，直接上完整代码吧
图⼀
Document
.water {
width: 100vw;
height: 2000px;
position: absolute;
top: 0;
left: 0;
background-repeat: no-repeat;
}
.content {
width: 800px;
height: 2000px;
margin-left: auto;
margin-right: auto;
background: cadetblue;
fullcalendar
overflow: hidden;
}
function addWaterMarker(str) {
// 这⾥限制了不超过15个字，实际按需求来
漂亮的边框怎么画var cpyName = str;
if (str.length > 16) {
cpyName = str.substring(0, 16);
}
// 创建 canvas 元素
var can = ateElement('canvas');
// 获取 content 元素
html个人网页完整代码怎么看
var report = $('.content')[0]
// 将 canvas 元素添加到 content 中
report.appendChild(can);
// 设置 canvas页⾯宽度，这⾥的 800 是因为我司⽔印⽂件⼤⼩固定，可按需求更改can.width = 800;
// 获取整个body⾼度
can.height = document.body.offsetHeight;
// 隐藏 canvas 元素
can.style.display = 'none';
can.style.zIndex = '999'
// 获取 canvas 元素⼯具箱
var cans = Context('2d');
/
/ 设置⽂字倾斜⾓度为 -25 度以及样式
python字符串多个分隔符
cans.font = "800 30px Microsoft JhengHei";
cans.fillStyle = "#000";
// 动态改变字体⼤⼩
asureText(cpyName).width > 180) {
var size = 180 / cpyName.length
cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
}
/
*
双重遍历，
当 宽度⼩于页⾯宽度时，
当 ⾼度⼩于页⾯⾼度时，
这⾥的宽⾼可以适当写⼤，⽬的是为了让⽔印⽂字铺满
*/
for(let i = (document.body.offsetHeight*0.5)*-1; i<800; i+=160) {
for(let j = 0; j
// 填充⽂字，x 间距, y 间距
cans.fillText(cpyName, i, j)
}
}
// 将 canvas 转化为图⽚并且设置为背景
report.style.backgroundImage = "url(" + DataURL("image/png") + ")"; }
addWaterMarker('测试⽔印');
图⼆
Document
.water {
width: 100vw;
height: 2000px;
position: absolute;
top: 0;
sql使用方法left: 0;
background-repeat: no-repeat;
}
.content {
width: 800px;
height: 2000px;
margin-left: auto;
margin-right: auto;
background: cadetblue;
overflow: hidden;
}
/
/ 添加⽔印⽅法
function addWaterMarker(str) {
var cpyName = str;
if (str.length > 16) {
cpyName = str.substring(0, 16);
}
var can = ateElement('canvas');
var report = $('.content')[0];
report.appendChild(can);
can.width = 180;
can.height = 110;
can.style.display = 'none';
can.style.zIndex = '999'
var cans = Context('2d');
cans.font = "800 30px Microsoft JhengHei";
cans.fillStyle = "#000";
integer tostring
asureText(cpyName).width > 180) {
var size = 180 / cpyName.length
cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
}
cans.fillText(cpyName, 60, 100);
report.style.backgroundImage = "url(" + DataURL("image/png") + ")";
}
addWaterMarker('测试⽔印');
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持脚本之家。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。