酷站(www.ku0.com)-致力于为互联网从业者提供动力!

热门关键词:  企业  as  baidu  c4rp3nt3r  美女
酷站

【云小站】新老客都返现+现金红包+瓜分60万奖池
酷站

html5

旗下栏目: html css xml html5 DW bootstrap Frontpage教程

前端canvas水印快速制作教程

来源:互联网搜集 作者:秩名 人气: 发布时间:2019-09-19
本篇文章主要介绍了前端canvas水印快速制作教程,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

两种水印效果如图:

 

原理解析:
 

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

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://www.jb51.net/html5/693983.html

相关文章

  • 自适应与响应式的区别

    自适应与响应式的区别

    根据日常开发经验及网上相关资料,用简单通俗易懂的大白话分析 自适应 跟 响应式 的区别。 注: 本文只分析自适应跟响应式的区别以及了解其由来的背景,不在于讨论其使用的方法 一、什么是自适应布局 自适应布局就是宽度自适用布局,在不......
    02-11
  • HTML5自定义mp3播放器源码教程

    HTML5自定义mp3播放器源码教程

    audio对象 src兼容.ogg .wav .mp3 audio controls src=data/imooc.wav/audio width autoplay loop muted静音 audio controls src=data/imooc.wav autoplay loop width=500 height=500 muted/audio 播放play() var myAudio = new Audio();......
    01-08
  • 使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨效果介绍

    使用canvas实现黑客帝国数字雨 效果图: 代码如下: !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1.0 meta http-equiv=X-UA-Compatible content=ie=edge titleDocu......
    01-05
  • 详解使用html2canvas实现将html内容写入到canvas中生成图片

    详解使用html2canvas实现将html内容写入到canvas中生成图片

    之前我们简单的了解了canvas的基本用法,这里我们来了解下如何将html内容写入到canvas中生成图片,这里我使用到了html2canvas插件,这个插件是基于canvas实现的 html2canvas官网: http://html2canvas.hertzen.com/ 一:下载html2canvas插......
    01-05
  • 详解HTML文本属性&颜色控制属性

    详解HTML文本属性&颜色控制属性

    一、文本装饰的属性 1.格式:text-decoration:underline; 2.取值: (1)underline代表下划线 (2)line-through代表删除线 (3)overline代表上划线 (4)none代表什么格式都没有(默认是这个属性) 注意:none的大多数用处在我们使用a......
    12-18
  • 关于html字符串正则判断和匹配的使用介绍

    关于html字符串正则判断和匹配的使用介绍

    最近在写一个组件,需要传入html字符串,里面用到了很多正则来判断是否是html标签或者匹配标签内的文本等,这里记录下。 如何判断传入的字符串包含一个闭合html标签 /\/?[a-z][\s\S]*/i 这个其实并不能判断标签闭合的完整性或者顺序等,......
    12-13
  • H5页面适配iPhoneX的教程

    H5页面适配iPhoneX的教程

    iPhoneX 打消了物理按键,改成底部小黑条,这一窜改导致网页呈现了比力难堪的屏幕适配问题。对付网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理惩罚,所以我们只需要存眷底部与小黑条的适配问题即可(即常见的吸底导航、返回顶......
    12-03
  • Html5之自定义属性(data-,dataset)

    Html5之自定义属性(data-,dataset)

    定义 H5为我们提供了以 data- 为前缀定义需要的属性即可设置自定义属性 div id=box1 data-name=Musk/divdiv id=box2 data-full-name=Elon Musk/div 获取 使用H5自定义属性对象dataset来获取 let box1 = document.getElementById(box1);le......
    11-19
  • 移动端html5判断是否滚动到底部并且下拉加载

    移动端html5判断是否滚动到底部并且下拉加载

    如何判断滚动是否滚动到了底部? 首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读属性,没有定义CSS或者内联......
    11-19
  • 5分钟实现Canvas鼠标跟随动画背景方法

    5分钟实现Canvas鼠标跟随动画背景方法

    关于Canvas制作炫酷背景,我会在git上不定时去更新,并会附上详细的解析,如果有喜欢的话,可以到git上瞧瞧 gitHub传送门 = 前言 相信很多前端小白都看过这样的背景动画,也好奇如何去实现这种效果!将这种效果应用到自己的个人网站上,......
    11-19

最新更新