前端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 相关文章推荐
使用 css3 transform 属性来变换背景图的方法
May 07 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 HTML / CSS
html5的自定义data-*属性与jquery的data()方法的使用
Jul 02 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 HTML / CSS
使用phonegap获取位置信息的实现方法
Mar 31 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 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数组对百万数据进行排除重复数据的实现代码
2010/06/08 PHP
php显示时间常用方法小结
2015/06/05 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
javascript hashtable实现代码
2009/10/13 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
JS 日期比较大小的简单实例
2014/01/13 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
react-native之ART绘图方法详解
2017/08/08 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
layui 表格操作列按钮动态显示的实现方法
2019/09/06 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
详解vue 组件
2020/06/11 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python打包可执行文件的方法详解
2016/09/19 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python使用pandas对数据进行差分运算的方法
2018/12/22 Python
Python数据结构之栈、队列及二叉树定义与用法浅析
2018/12/27 Python
Python3 中sorted() 函数的用法
2020/03/24 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
Tech21美国/加拿大:英国NO.1防摔保护壳品牌
2018/01/20 全球购物
女性时尚网购:Chic Me
2019/07/30 全球购物
经典c++面试题六
2012/01/18 面试题
管理科学大学生求职信
2013/11/13 职场文书
爱国演讲稿400字
2014/05/07 职场文书
演讲稿格式范文
2014/05/19 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
解决golang 关于全局变量的坑
2021/05/06 Golang
Django使用echarts进行可视化展示的实践
2021/06/10 Python
新手入门Jvm-- JVM对象创建与内存分配机制
2021/06/18 Java/Android
MySQL数据库 任意ip连接方法
2022/05/20 MySQL