当前位置： 移动技术网 > IT编程>开发语言>JavaScript > js 学习之路5：使用js在网页中添加水印

js 学习之路5：使用js在网页中添加水印

2019年01月29日  | 移动技术网IT编程  | 我要评论

 

 

示例：

<!doctype html>
<html>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<body>

<script charset = "utf-8">
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")+")";

}

addwatermarker("2019年1月25日")
addwatermarker("这是添加的水印")
</script>

<h2>这是标题</h2>
<p>这个网页中，你会看到被加了水印</p>


<form name="user" action="#" method="get">
<table align="center">
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" />
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="name" checked="checked"/>男
<input type="radio" name="name"/>女
</td>
</tr>
<tr>
<td>地址</td>
<td>
<select>
<option>北京</option>
<option>天津</option>
<option>上海</option>
</select>
<select>
<option>海淀区</option>
<option>朝阳区</option>
<option>昌平区</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="sport" checked="checked"/>运动
<input type="checkbox" name="basketball"/>篮球
<input type="checkbox" name="volleyball"/>排球
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="text" name="emall" />
</td>
</tr>
<tr>
<td>电话号码</td>
<td>
<input type="text" name="phone" />
</td>
</tr>
<tr>
<td>上传头像</td>
<td>
<input type="file" name="file" />
</td>
</tr>
<tr>
<td>其他</td>
<td>
<textarea rows="15" cols="50"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="普通按钮"/>
<input type="submit" name="tijiao" value="注册"/>
<input type="reset" name="quxiao" value="取消"/>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="image" name="img" src="btn.gif"/>
</td>
</tr>
</table>
</form>

</body>
</html>

页面中html部分功能未测试，复制粘贴过来只为测试添加水印功能填充网页内容。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网