示例：

<!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. Spark MLlib

    MLlib    数据挖掘与机器学习        数据挖掘体系 数据挖掘:也就是data mining,是一个很宽泛的概念,也是一个新兴学科,旨在如何从海量数据中挖掘出有用的信息来.         ...

  2. wget Mac OS 下安装

    wget是一个从网络上自动下载文件的自由工具,支持通过HTTP.HTTPS.FTP三个最常见的TCP/IP协议下载,并可以使用HTTP代理. 下面介绍如何在Mac OS 下安装Wget 下载最新版的 ...

  3. qt 窗口鼠标穿透

    Qt 不规则窗体 – 鼠标点击穿透 qt实现鼠标穿透,如果要被穿透窗口只有一层,也即没有嵌套窗口,直接只用对子窗口使用setAttribute (Qt::WA_TransparentForMouseE ...

  4. Python爬虫入门教程 31-100 36氪(36kr)数据抓取 scrapy

    1. 36氪(36kr)数据----写在前面 今天抓取一个新闻媒体,36kr的文章内容,也是为后面的数据分析做相应的准备的,预计在12月底,爬虫大概写到50篇案例的时刻,将会迎来一个新的内容,系统的数 ...

  5. ImportError: cannot import name UnrewindableBodyError

    错误信息: File "/usr/lib/python2.7/site-packages/urllib3/util/__init__.py", line 4, in <mod ...

  6. 《HelloGitHub月刊》第 11 期

    <HelloGitHub>第 11 期 兴趣是最好的老师,<HelloGitHub>就是帮你找到兴趣! 简介 最开始我只是想把自己在浏览 GitHub 过程中,发现的有意思.高 ...

  7. Chapter 5 Blood Type——11

    "I just wondered… if you could warn me beforehand the next time you decide to ignore me for my ...

  8. TypeScript 素描 - 高级类型、迭代器

    /* 交叉类型,在TypeScrpt中是很特有的.所以值得认真学习 交叉类型是将多个类型合并为一个类型,这让我们可以把现有的多种类型叠加到一起成为一种 类型 交叉类型同时拥有 Person 和 Emp ...

  9. HBase学习-HBase原理

    1.系统架构 1.1 图解   从HBase的架构图上可以看出,HBase中的组件包括Client.Zookeeper.HMaster.HRegionServer.HRegion.Store.MemS ...

  10. PHP自动加载机制

    类的载入共经历了三个阶段 第一阶段是面向过程式的做法,整个项目里到处都是include或require. 问题:难看,不易维护. . 第二阶段是魔术方法__autoload,当new一个类的时候,如果 ...