示例：

<!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. scala判断数据类型

    scala判断一个数据或者对象的类型只需要在该对象后面添加 .getClass.getSimpleName : scala> 222.getClass.getSimpleName res1: S ...

  2. Java 多线程（三）—— 线程的生命周期及方法

    这篇博客介绍线程的生命周期. 线程是一个动态执行的过程,它也有从创建到死亡的过程. 线程的几种状态 在 Thread 类中,有一个枚举内部类: 上面的信息以图片表示如下: 第一张图: 第二张图:把等待 ...

  3. Ocelot统一权限验证

    Ocelot作为网关,可以用来作统一验证,接上一篇博客,我们继续 前一篇,我们创建了OcelotGateway网关项目,DemoAAPI项目,DemoBAPI项目,为了验证用户并分发Token,现在还 ...

  4. 【朝花夕拾】Android编码风格篇

    结合51CTO学院中张凌华老师讲的编码风格课程,对自己平时工作中的形成的一些编码风格做一些总结. 一. 项目开发目录命名: Requirement - 需求相关文档 Design - 设计 Plann ...

  5. 初探Java设计模式3：行为型模式（策略，观察者等）

    行为型模式 行为型模式关注的是各个类之间的相互作用,将职责划分清楚,使得我们的代码更加地清晰. 策略模式 策略模式太常用了,所以把它放到最前面进行介绍.它比较简单,我就不废话,直接用代码说事吧. 下面 ...

  6. Mongodb~Linux环境下的部署~服务的部署与自动化

    <mongodb在linux上的部署> 事实上redis安装程序挺好,直接帮我们生成了服务,直接可以使用systemctl去启动它,而mongodb在这方面没有那么智能,需要我们去编写自己 ...

  7. wsl中使用原生docker

    之前介绍过windows中安装docker,但是它需要用到hyper-v.hyper-v与vm不兼容非常之不方便.不过发现windows有wsl(linux子系统)遂试验,结果非常nice功能一应俱全 ...

  8. Asp.Net SignalR Hub集线器

    集线器Hub类 使用持久连接类去开发是有些困难的,因为基于事件的开发方式,我们可以进行操作的地方也仅仅只是OnReceived事件内,这有些像websocket的方式.我们迫切的需要一种更人性化,更为 ...

  9. JDK源码分析（9）之 WeakHashMap 相关

    平时我们使用最多的数据结构肯定是 HashMap,但是在使用的时候我们必须知道每个键值对的生命周期,并且手动清除它:但是如果我们不是很清楚它的生命周期,这时候就比较麻烦:通常有这样几种处理方式: 由一 ...

  10. Perl IO：IO重定向

    文件句柄和文件描述符的关系 文件描述符是操作系统的资源,对于实体文件来说,每打开一次文件,操作系统都会为该进程分配一个文件描述符来关联(指向)这个文件,以后操作文件数据都根据这个文件描述符来操作,而不 ...