示例：

  1. <!DOCTYPE html>
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  4. <body>
  5. <script charset = "utf-8">
  6. function addWaterMarker(str){
  7.  
  8. var can = document.createElement('canvas');
  9. var body = document.body;
  10. body.appendChild(can);
  11. can.width=400;
  12. can.height=200;
  13. can.style.display='none';
  14.  
  15. var cans = can.getContext('2d');
  16. cans.rotate(-20*Math.PI/180);
  17. cans.font = "16px Microsoft JhengHei";
  18. cans.fillStyle = "rgba(17, 17, 17, 0.50)";
  19. cans.textAlign = 'left';
  20. cans.textBaseline = 'Middle';
  21. cans.fillText(str,can.width/3,can.height/2);
  22. body.style.backgroundImage="url("+can.toDataURL("image/png")+")";
  23. }
  24. addWaterMarker("2019年1月25日")
  25. addWaterMarker("这是添加的水印")
  26. </script>
  27. <h2>这是标题</h2>
  28. <p>这个网页中，你会看到被加了水印</p>
  29.  
  30. <form name="user" action="#" method="get">
  31.     	<table  align="center">
  32.     		<tr>
  33.     			<td>用户名</td>
  34.     			<td>
  35.     				<input type="text" name="username" />
  36. 				</td>
  37.     		</tr>
  38.     		<tr>
  39.     			<td>密码</td>
  40.     			<td>
  41.     				<input type="password"/>
  42. 				</td>
  43.     		</tr>
  44.     		<tr>
  45.     			<td>性别</td>
  46.     			<td>
  47.     				<input type="radio" name="name" checked="checked"/>男
  48.     				<input type="radio" name="name"/>女
  49. 				</td>
  50.     		</tr>
  51.     		<tr>
  52.     			<td>地址</td>
  53.     			<td>
  54.     				<select>
  55.     					<option>北京</option>
  56.     					<option>天津</option>
  57.     					<option>上海</option>
  58.     				</select>
  59.     				<select>
  60.     					<option>海淀区</option>
  61.     					<option>朝阳区</option>
  62.     					<option>昌平区</option>
  63.     				</select>
  64. 				</td>
  65.     		</tr>
  66.     		<tr>
  67.     			<td>爱好</td>
  68.     			<td>
  69.     				<input type="checkbox" name="sport" checked="checked"/>运动
  70.     				<input type="checkbox" name="basketball"/>篮球
  71.     				<input type="checkbox" name="volleyball"/>排球
  72. 				</td>
  73.     		</tr>
  74.     		<tr>
  75.     			<td>邮箱</td>
  76.     			<td>
  77.     				<input type="text" name="emall" />
  78. 				</td>
  79.     		</tr>
  80.     		<tr>
  81.     			<td>电话号码</td>
  82.     			<td>
  83.     				<input type="text" name="phone" />
  84. 				</td>
  85.     		</tr>
  86.     		<tr>
  87.     			<td>上传头像</td>
  88.     			<td>
  89.     				<input type="file" name="file" />
  90. 				</td>
  91.     		</tr>
  92.     		<tr>
  93.     			<td>其他</td>
  94.     			<td>
  95.     				<textarea rows="15" cols="50"></textarea>
  96. 				</td>
  97.     		</tr>
  98.     		<tr>
  99.     			<td></td>
  100.     			<td>
  101.     				<input type="button" value="普通按钮"/>
  102.     				<input type="submit" name="tijiao" value="注册"/>
  103.     				<input type="reset" name="quxiao" value="取消"/>
  104. 				</td>
  105.     		</tr>
  106.     		<tr>
  107.     			<td></td>
  108.     			<td>
  109.     				<input type="image" name="img" src="btn.gif"/>
  110. 				</td>
  111.     		</tr>
  112.     	</table>
  113.     </form>
  114. </body>
  115. </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. 【T-SQL】系列文章全文目录（2017-06-26更新）

    本系列[T-SQL]主要是针对T-SQL的总结. SQL基础 [T-SQL基础]01.单表查询-几道sql查询题 [T-SQL基础]02.联接查询 [T-SQL基础]03.子查询 [T-SQL基础]0 ...

  2. spark Could not write all entries

    使用 spark 将 dataFrame 储存到 elasticsearch 出现如下报错: Caused by: org.elasticsearch.hadoop.EsHadoopException ...

  3. Python内置函数(27)——hasattr

    英文文档: hasattr(object, name) The arguments are an object and a string. The result is True if the stri ...

  4. Django+Bootstrap+Mysql 搭建个人博客（三）

    3.1.分页功能 (1)views.py from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger def make ...

  5. 华为oj之字符串反转

    题目: 字符串反转 热度指数:4940 时间限制:1秒 空间限制:32768K 本题知识点: 字符串 题目描述 写出一个程序,接受一个字符串,然后输出该字符串反转后的字符串.例如: 输入描述: 输入N ...

  6. Kafka基础简介

    kafka是一个分布式的,可分区的,可备份的日志提交服务,它使用独特的设计实现了一个消息系统的功能. 由于最近项目升级,需要将spring的事件机制转变为消息机制,针对后期考虑,选择了kafka作为消 ...

  7. 复杂的QR_code

    Topic Link http://ctf5.shiyanbar.com/stega/QR_code.png 1)打开链接之后发现是一个二维码,扫描之后出现一个字符串 secret is here 2 ...

  8. kernel pwn 入门环境搭建

    刚开始上手kernel pwn,光环境就搭了好几天,应该是我太菜了.. 好下面进入正题,环境总共就由两部分构成,qemu和gdb.这两个最好都需要使用源码安装. 我使用的安装环境为 qemu:安装前要 ...

  9. DriverManager 驱动管理器类简介 JDBC简介（三）

    驱动程序管理器是负责管理驱动程序的,驱动注册以后,会保存在DriverManager中的已注册列表中 后续的处理就可以对这个列表进行操作 简言之,驱动管理器,就是字面含义,主要负责就是管理 驱动 概述 ...

  10. Redis的复制是如何实现的？

    前言 关系数据库通常会使用一个主服务器向多个从服务器发送更新,并使用从服务器来处理所有的读请求,Redis采用了同样方法来实现自己的复制特性. 简单总结起来就是:在接收到主服务器发送的数据初始副本之后 ...