介绍 <李> & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
& lt;才能meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
& lt;才能title> Document</title>
& lt;才能style>
,,,.water {
,,,,,宽度:,100大众;
,,,,,身高:,2000 px;
,,,,,位置:,绝对;
,,,,,:,0;
,,,,,左:,0;
,,,,,平铺方式:,不再重演;
,,,}
,,,.content {
,,,,,宽度:,800 px;
,,,,,身高:,2000 px;
,,,,,margin-left:,汽车;
,,,,,margin-right:,汽车;
,,,,,背景:,cadetblue;
,,,,,溢出:,隐藏;
,,,,,
,,,}
& lt;才能/style>
& lt;才能https://www.yisu.com/zixun/script src=" https://cdn.bootcss.com/jquery/3.4.1/jquery.js ">
头
身体<>
<脚本>
函数addWaterMarker (str) {//这里限制了不超过15个字,实际按需求来
var cpyName=str;
如果(str.length> 16) {
cpyName=str.substring (0, 16);
}//创建帆布元素
var=document.createElement(“画布”);//获取内容元素=$ var报告(.content) [0]//将画布元素添加到内容中
report.appendChild(可以);//设置帆布页面宽度,这里的800是因为我司水印文件大小固定,可按需求更改
可以。宽度=800;//获取整个身体高度
可以。身高=document.body.offsetHeight;//隐藏帆布元素
can.style。显示='没有';
can.style。zIndex=' 999 '//获取帆布元素工具箱
var罐=can.getContext (2 d);//设置文字倾斜角度为-25度以及样式
罐。旋转(-25 *数学。π/180);
罐。微软字体=" 800 30 px JhengHei”;
罐。fillStyle=" # 000”;
罐。textAlign=爸行摹?
罐。textBaseline=爸胁?//动态改变字体大小
如果(cans.measureText (cpyName)。宽度> 180){
var=180/cpyName.length大小
罐。字体=' 800 ' +大小+“px”+“微软JhengHei”
}/*
双重遍历,
当宽度小于页面宽度时,
当高度小于页面高度时,
这里的宽高可以适当写大,目的是为了让水印文字铺满
*/(让我=(document.body.offsetHeight * 0.5) * 1;我<800;我+=160){
(让j=0;j & lt; ! DOCTYPE html>
& lt; html lang=癳n"祝辞
& lt; head>
& lt;才能meta charset=癠TF-8"比;
& lt;才能meta name=皏iewport",内容=翱矶?设备宽度,初始=1.0,比;
& lt;才能meta http-equiv=癤-UA-Compatible",内容=癷e=edge"比;
& lt;才能title> Document</title>
& lt;才能style>
,,,.water {
,,,,,宽度:,100大众;
,,,,,身高:,2000 px;
,,,,,位置:,绝对;
,,,,,:,0;
,,,,,左:,0;
,,,,,平铺方式:,不再重演;
,,,}
,,,.content {
,,,,,宽度:,800 px;
,,,,,身高:,2000 px;
,,,,,margin-left:,汽车;
,,,,,margin-right:,汽车;
,,,,,背景:,cadetblue;
,,,,,溢出:,隐藏;
,,,}
& lt;才能/style>
& lt;/head>
& lt; body>
,,,& lt; div 类=癱ontent"比;
,,,,,& lt; div 类=皐ater"祝辞& lt;/div>
,,,& lt;/div>
& lt;才能https://www.yisu.com/zixun/script src=" https://cdn.bootcss.com/jquery/3.4.1/jquery.js ">
小编给大家分享一下前端帆布如何实现水印,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
两种水印效果如图:
原理解析:
图一斜纹类:创建一个和页面一样大的画布,根据页面大小以及倾斜角度大致铺满水印文字,最后转化为一张图片设为背景
<李>图二倾斜类:将文字倾斜后转化为图片,然后设置背景图片重复填充整个页面
代码分析:
这里我只简略分析图一斜纹类,事实上这两种方式都较为简单,不需要特别强的帆布基础,只需大概了解就行,直接上完整代码吧
图一
