HTML5 Canvas to add text watermark to pages

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="3000" height="1500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

<script>
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 ' );
 // ctx.translate (-60, 0); // moving coordinate origin 
cans.rotate (- 20 is * Math.PI / 180 [ ); 
Cans. font = " 16px JhengHei the Microsoft " ; 
cans.fillText ( " Aston sent to! " , can.width / . 3 , can.height / 2 ); 
body.style.backgroundImage = " URL ( " + can.toDataURL ( " Image / PNG " ) + ")";

</script>

</body>
</html>

 

Guess you like

Origin www.cnblogs.com/yinrq/p/11607086.html