示例：

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

js 学习之路5：使用js在网页中添加水印的更多相关文章

  1. js 学习之路4：js运行/输出中文乱码问题解决

    网上找了一个简单的例子,编写出来很简单,但是乱码的问题稍微困扰了一下. 题目: 1. 大马驮2石粮食,中马驮1石粮食,两头小马驮一石粮食,要用100匹马,驮100石粮食,该如何调配? js解决代码: ...

  2. 【温故知新】——BABYLON.js学习之路·前辈经验（二）

    前言:在上一篇随笔BABYLON.js学习之路·前辈经验(一)中回顾了组内同事们长时间在Babylon开发实践中的总结出的学习之路和经验,这一篇主要对开发中常见的一些功能点做一个梳理,这里只作为温故知 ...

  3. JS学习之路，菜鸟总结的注意事项及错误更正

    JavaScript 是一种面向对象的动态语言,它的语法来源于 Java 和 C,所以这两种语言的许多语法特性同样适 用于 JavaScript.需要注意的一个主要区别是 JavaScript 不支持 ...

  4. Android开发学习之路--Java和Js互相调用

      随着前端的火热,以前开发的快速,越来越多的native app在其中融合了h5,就拿淘宝就是很多的h5组成的,一旦出现什么节日,他都可以不用通过更新app来实现界面的改变,而且android和io ...

  5. react.js学习之路一

    今天新老大来了,我们要学习他使用的框架react.js,现在是两眼一抹黑,对于我这个前端菜鸟来说,是真正的重新开始,好了,不说那么多了,开始随便记录我的学习,之后再整理内容. (1)对于react来说 ...

  6. node.js学习之路（1）

    node.js 属于后台语言,后台语言还有php,java等. 优势:1.性能好   node.js VS php   86倍 2.跟前台JS配合方便 3.node.js便于前端学习 https:// ...

  7. node.js学习（二）--Node.js控制台（REPL）&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  8. js学习笔记第一课（js基础知识）

    1.js代码在浏览器中执行. 2.js代码直接插入网页中需包含在 <script language="javascript"> js代码 </script> ...

  9. 中小研发团队架构实践之生产环境诊断工具WinDbg 三分钟学会.NET微服务之Polly 使用.Net Core+IView+Vue集成上传图片功能 Fiddler原理~知多少? ABP框架（asp.net core 2.X+Vue）模板项目学习之路（一） C#程序中设置全局代理(Global Proxy) WCF 4.0 使用说明 如何在IIS上发布，并能正常访问

    中小研发团队架构实践之生产环境诊断工具WinDbg 生产环境偶尔会出现一些异常问题,WinDbg或GDB是解决此类问题的利器.调试工具WinDbg如同医生的听诊器,是系统生病时做问题诊断的逆向分析工具 ...

  10. JS学习之路

    前言 接触js也有四五年的时间了,对js的认识也逐渐加深,想把自己这几年学习js的经历记录一下. 总则-都是对象,都是引用 在接触js前用的比较多的是java,在刚开始接触js的时候,老实讲,我是有点 ...

随机推荐

  1. VSphere虚拟化ESXi的安装及基本管理

    虚拟化和云计算技术正在快速的发展,新的概念.观点.产品不断涌现.服务器虚拟化技术受到了人们的高度重视,普遍相信虚拟化将成为数据中心的重要组成部分.vSphere是VMware公司推出的一套服务器虚拟化 ...

  2. iOS学习——Quartz2D学习之DrawRect

    Quartz2D学习之DrawRect 本文以问答形式主要讲述Quartz2D的相关内容,参考内容是网上下载的学习视频资料. 1.什么是Quartz2D? 他是一个二维的绘图引擎,同时支持iOS和Ma ...

  3. Python之高级特性

    一.切片 L = ['Michael', 'Sarah', 'Tracy', 'Bob', 'Jack']取出前三个元素 , 笨方法就是通过下标一个一个获取 [L[0], L[1], L[2]]Pyt ...

  4. Carousel轮播图

     <div id="carousel-example-generic" class="carousel slide" data-ride="ca ...

  5. 设计模式的征途（C#实现）—文章目录索引

    1.预备篇 UML类图10分钟快速入门 2.创建型模式 ① 设计模式的征途-01.单例(Singleton)模式 ② 设计模式的征途-02.简单工厂(Simple Factory)模式 ③ 设计模式的 ...

  6. 使用SDL2显示一张图片,SDL2上手贴

    SDL全名Simple DirectMedia Layer,是一个跨平台的底层音频.视频.键盘.鼠标操作库,操作实际通过更底层的OpenGL/Direct3D完成,在保留跨平台的兼容性之外提供了非常高 ...

  7. es6学习笔记--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  8. 前端笔记之JavaScript（八）关于元素&计算后的样式

    一.获取元素方法(JS选择器) 1.1概述 得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: docu ...

  9. [软件开发技巧]·树莓派极简安装OpenCv

    树莓派极简安装OpenCv 个人主页–> https://xiaosongshine.github.io/ 因为最近在开发使用树莓派+usb摄像头识别模块,打算用OpenCv,发现网上的树莓派O ...

  10. CentOS6.5下DNS服务器搭建与配置

    一.安装机器情况 192.168.1.70(dns 主节点) 192.168.1.71(dns 从节点) 二.主节点DNS的安装及配置 1. DNS服务器所需的软件包安装 yum -y install ...