zoukankan      html  css  js  c++  java
  • 水印


    <!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>
    ————————————————
    版权声明:本文为CSDN博主「beichen3997」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/beichen3997/article/details/95627974
  • 相关阅读:
    前端上传组件Plupload使用指南
    移动前端开发之viewport的深入理解
    性能更好的js动画实现方式——requestAnimationFrame
    如何判断一个js对象是否一个DOM对象
    用Phaser来制作一个html5游戏——flappy bird (二)
    用Phaser来制作一个html5游戏——flappy bird (一)
    css选择器中:first-child与:first-of-type的区别
    用node-webkit把web应用打包成桌面应用
    为Titanium创建自己的安卓推送模块
    Titanium中调用ios组件时语言不是本地化的解决方法
  • 原文地址:https://www.cnblogs.com/wsj1/p/14461910.html
Copyright © 2011-2022 走看看