<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <canvas id="myCanvas" width="1000" height="500" > Your browser does not support the HTML5 canvas tag. </canvas> <script> //准备img对象 var img = new Image(); img.src = './img/demo.jpg'; // 加载完成开始绘制 img.onload=function(){ //准备canvas环境 var canvas=document.getElementById("myCanvas"); var ctx=canvas.getContext("2d"); // 绘制图片 ctx.drawImage(img,0,0); // 绘制水印 ctx.font="20px microsoft yahei"; ctx.fillStyle = "rgba(255,255,255,0.5)"; ctx.fillText("my images",100,100); } </script> </body>
其实就是