js 学习之路5：使用js在网页中添加水印
示例：
<!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部分功能未测试，复制粘贴过来只为测试添加水印功能填充网页内容。
