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

时间：2022-11-13 11:47:43

示例：

<!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部分功能未测试，复制粘贴过来只为测试添加水印功能填充网页内容。

相关文章