用canvas給介面新增文字水印
阿新 • • 發佈：2019-01-29
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <meta charset="UTF-8"> <title>Document</title> <style> </style> </head> <canvas style="display:none;" id="can" width="350" height="350"></canvas> <p>asasas</p> <img src="http://img2.3lian.com/2014/f2/152/d/87.jpg" /> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <p>asasas</p> <div id="WaterMark"></div> <script> (function() { $('#WaterMark').css({ "position": "absolute", "left": "0", "top": "50px", "height": $(document).height()-50, "opacity": "1", "width": "100%", "z-index": "900" }); var canvas = document.getElementById('can'); if(!canvas.getContext) { //你的瀏覽器不支援canvas! return; } ctx = canvas.getContext('2d'); ctx.font="30px Microsoft YaHei"; ctx.rotate(-45*Math.PI/180); ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.fillText("Hello World",-100,220); document.getElementById('WaterMark').style.backgroundImage = 'url("' + ctx.canvas.toDataURL() + '")'; })(); </script> </body>