前端canvas水印快速制作(附完整代码)


Posted in HTML / CSS onSeptember 19, 2019

两种水印效果如图:

前端canvas水印快速制作(附完整代码)

前端canvas水印快速制作(附完整代码)

原理解析:

  • 图一斜纹类:创建一个和页面一样大的画布,根据页面大小以及倾斜角度大致铺满水印文字,最后转化为一张图片设为背景
  • 图二倾斜类:将文字倾斜后转化为图片,然后设置背景图片repeat填充整个页面

代码分析:

这里我只简略分析图一斜纹类,事实上这两种方式都较为简单,不需要特别强的canvas基础,只需大概了解就行,直接上完整代码吧

图一

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .water {
      width: 100vw;
      height: 2000px;
      position: absolute;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
    }
    .content {
      width: 800px;
      height: 2000px;
      margin-left: auto;
      margin-right: auto;
      background: cadetblue;
      overflow: hidden;
      
    }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
  <div class="content">
    <div class="water"></div>
  </div>
  
  <script>
    function addWaterMarker(str) {
      // 这里限制了不超过15个字,实际按需求来
      var cpyName = str;
      if (str.length > 16) {
        cpyName = str.substring(0, 16);
      }
      // 创建 canvas 元素
      var can = document.createElement('canvas');
      // 获取 content 元素
      var report = $('.content')[0]
      // 将 canvas 元素添加到 content 中
      report.appendChild(can);
      // 设置 canvas页面宽度,这里的 800 是因为我司水印文件大小固定,可按需求更改
      can.width = 800;
      // 获取整个body高度
      can.height = document.body.offsetHeight;
      // 隐藏 canvas 元素
      can.style.display = 'none';
      can.style.zIndex = '999'
      // 获取 canvas 元素工具箱
      var cans = can.getContext('2d');
      // 设置文字倾斜角度为 -25 度以及样式
      cans.rotate(-25 * Math.PI / 180);
      cans.font = "800 30px Microsoft JhengHei";
      cans.fillStyle = "#000";
      cans.textAlign = 'center';
      cans.textBaseline = 'Middle';
      // 动态改变字体大小
      if(cans.measureText(cpyName).width > 180) {
        var size = 180 / cpyName.length
        cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
      }
      /* 
        双重遍历,
        当 宽度小于页面宽度时,
        当 高度小于页面高度时,
        这里的宽高可以适当写大,目的是为了让水印文字铺满
       */
      for(let i = (document.body.offsetHeight*0.5)*-1; i<800; i+=160) {
        for(let j = 0; j<document.body.offsetHeight*1.5; j+=60) {
          // 填充文字,x 间距, y 间距
          cans.fillText(cpyName, i, j)
        }
      }
      // 将 canvas 转化为图片并且设置为背景
      report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker('测试水印');
  </script>
</body>

</html>

图二

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .water {
      width: 100vw;
      height: 2000px;
      position: absolute;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
    }
    .content {
      width: 800px;
      height: 2000px;
      margin-left: auto;
      margin-right: auto;
      background: cadetblue;
      overflow: hidden;
    }
  </style>
</head>
<body>
    <div class="content">
      <div class="water"></div>
    </div>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
  <script>
    // 添加水印方法
    function addWaterMarker(str) {
      var cpyName = str;
      if (str.length > 16) {
        cpyName = str.substring(0, 16);
      }
      var can = document.createElement('canvas');
      var report = $('.content')[0];
      report.appendChild(can);
      can.width = 180;
      can.height = 110;
      can.style.display = 'none';
      can.style.zIndex = '999'

      var cans = can.getContext('2d');
      cans.rotate(-25 * Math.PI / 180);
      cans.font = "800 30px Microsoft JhengHei";
      cans.fillStyle = "#000";
      cans.textAlign = 'center';
      cans.textBaseline = 'Middle';
      if(cans.measureText(cpyName).width > 180) {
        var size = 180 / cpyName.length
        cans.font = '800 ' + size +'px '+ ' Microsoft JhengHei'
      }
      cans.fillText(cpyName, 60, 100);
      report.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
    }
    addWaterMarker('测试水印');
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
全面总结使用CSS实现水平垂直居中效果的方法
Mar 10 HTML / CSS
详解使用CSS3的@media来编写响应式的页面
Nov 01 HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
Jun 09 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
Mar 17 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
Apr 26 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
HTML5 Canvas 破碎重组的视频特效的示例代码
Sep 24 #HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 #HTML / CSS
基于 HTML5 WebGL 实现的垃圾分类系统
Oct 08 #HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 #HTML / CSS
分享一个页面平滑滚动小技巧(推荐)
Oct 23 #HTML / CSS
分享一个H5原生form表单的checkbox特效代码
Feb 26 #HTML / CSS
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
Jan 08 #HTML / CSS
You might like
php实现文件下载实例分享
2014/06/02 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
smarty模板数学运算示例
2016/12/11 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
jquery仅用6行代码实现滑动门效果
2015/09/07 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
浏览器兼容的JS写法总结
2016/04/27 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
小程序实现单选多选功能
2018/11/04 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
element-ui封装一个Table模板组件的示例
2021/01/04 Javascript
Python3实现从文件中读取指定行的方法
2015/05/22 Python
Python实现字典依据value排序
2016/02/24 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
基于keras中的回调函数用法说明
2020/06/17 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
纯CSS3实现8组超炫酷鼠标滑过图片动画
2016/03/16 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
2018/02/10 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
JD Sports马来西亚:英国领先的运动鞋和运动服饰零售商
2018/03/13 全球购物
屈臣氏菲律宾官网:Watsons菲律宾
2020/06/30 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
工程材料采购方案
2014/05/18 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
使用canvas仿Echarts实现金字塔图的实例代码
2021/11/11 HTML / CSS