示例：

<!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. GoJS学习笔记

    GoJS 和 GO 语言没有关系,它是一个用来创建交互式图表的 JavaScript 库. 基础概念 GraphObject 是所有图形是抽象基类,基本上 GoJS 中,万物皆 GraphObject ...

  2. restful风格的API

    在说restful风格的API之前,我们要先了解什么是rest.什么是restful.最后才是restful风格的API! PS(REST:是一组架构约束条件和原则,REST是Roy Thomes F ...

  3. 隔壁老主精讲web页面性能优化。

    首先说一下为什么要进行web页面性能优化,在同样的网络环境下,两个同样能满足你的需求的网站,一个“Biu”的一下就加载出来了,一个卡--卡--卡--卡--卡--才出来,你会选择哪个?研究表明:用户最满 ...

  4. 【快速入门ORM框架之Dapper】大牛勿进系列

    前言:dapper是什么?Dapper是.NET下一个micro的ORM,它和Entity Framework或Nhibnate不同,属于轻量级的,并且是半自动的.也就是说实体类都要自己写.它没有复杂 ...

  5. C#2.0之细说泛型

    C#2的头号亮点 : 泛型 在C#1中,Arraylist总是会给人带来困扰,因为它的参数类型是Object,这就让开发者无法把握集合中都有哪些类型的数据.如果对string类型的数据进行算术操作那自 ...

  6. Kafka数据迁移

    1.概述 Kafka的使用场景非常广泛,一些实时流数据业务场景,均依赖Kafka来做数据分流.而在分布式应用场景中,数据迁移是一个比较常见的问题.关于Kafka集群数据如何迁移,今天笔者将为大家详细介 ...

  7. 补习系列(10)-springboot 之配置读取

    目录 简介 一.配置样例 二.如何注入配置 1. 缺省配置文件 2. 使用注解 3. 启动参数 还有.. 三.如何读取配置 @Value 注解 Environment 接口 @Configuratio ...

  8. 采用config方式灵活配置我们的Quarz.net中的Job,Trigger

    经常在项目中遇到定时任务的时候,通常第一个想到的是Timer定时器,但是这玩意功能太弱鸡,实际上通常采用的是专业化的第三方调度框架,比如说 Quartz,它具有功能强大和应用的灵活性,我想使用过的人都 ...

  9. Alibaba Cluster Data 开放下载：270GB 数据揭秘你不知道的阿里巴巴数据中心

    打开一篇篇 IT 技术文章,你总能够看到“大规模”.“海量请求”这些字眼.如今,这些功能强大的互联网应用,都运行在大规模数据中心上,然而,对于大规模数据中心,你又了解多少呢?实际上,除了阅读一些科技文 ...

  10. ASP.NET Core 2.1 : 十二.内置日志、使用Nlog将日志输出到文件

    应用离不开日志,虽然现在使用VS有强大的调试功能,开发过程中不复杂的情况懒得输出日志了(想起print和echo的有木有),但在一些复杂的过程中以及应用日常运行中的日志还是非常有用. ASP.NET ...