zoukankan      html  css  js  c++  java
  • html 水印效果

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>水印</title>
    </head>
    <body>
    <div class="warp">
    <div class="title">我是标题</div>
    <div class="content">
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    我是内容我是内容我是内容我是内容我是内容我是内容
    </div>
    </div>
    </body>
    </html>
    <script>
    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")+")"; //把画布插入到body中
    }
    //调用这个方法即可
    addWaterMarker("水印");
    </script>

    摘录网络:

  • 相关阅读:
    npm教程2
    02.RIP——CCNP学习笔记
    01.静态路由——CCNP学习笔记
    The 10th SWJTU ACM Online Tutorial
    visual studio 2005 常用按键
    Python垃圾回收机制
    私人网盘系统2.0—全部升级为layUI+PHP(持续更新中)
    Layui框架+PHP打造个人简易版网盘系统
    翻译app的开发全过程---编码+打包+上架
    值得认真学习的6 个 JavaScript 框架
  • 原文地址:https://www.cnblogs.com/Andy-Blog/p/11050962.html
Copyright © 2011-2022 走看看