1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7 </head> 8 9 <body> 10 <img src="img/bg.png" id="img1" style="display: block" width="750" height="1026" /> 11 <img src="img/missing-face.png" id="img2" style="display: block" width="100" height="100" /> 12 <img id="img3" /> 13 <button onclick="draw()" id="btn">点击下载</button> 14 <script> 15 function draw() { 16 var img1 = document.getElementById("img1"), 17 img2 = document.getElementById("img2"), 18 img3 = document.getElementById("img3"); 19 img1.width = 750; 20 img1.height = 1026; 21 img2.width = 100; 22 img2.height = 100; 23 var canvas = document.createElement("canvas"), 24 context = canvas.getContext("2d"); 25 canvas.width = img1.width; // 绘制宽度 26 canvas.height = img1.height; // 绘制高度 27 // canvas.style.letterSpacing = '10px'; // 圆角 28 // 将 img1 加入画布 29 /** 30 * context.drawImage(image,x,y,w,h) 31 * image:Image对象var img=new Image(); img.src="url(...)"; 32 * x:绘制图像的x坐标 33 * y:绘制图像的y坐标 34 * w:绘制图像的宽度 35 * h:绘制图像的高度 36 */ 37 context.drawImage(img1, 0, 0, img1.width, img1.height); 38 // 将 img2 加入画布 39 context.drawImage(img2, 130, 800, img2.width, img2.height); 40 // 文字填充颜色 41 context.fillStyle = '#333'; 42 // 文字字体 43 context.font = 'bold 45px Baoli SC'; 44 // 设置文字 45 var name_text = '济 南 兴 国 寺'; 46 // 获取文字的宽度 计算字体长度(px) 47 var name_width = context.measureText(name_text).width; 48 // 获取除去文本后的一半的宽度 49 var x = (canvas.width - name_width) / 2; 50 /** 51 * context.font:设置字体样式 52 * context.textAlign:水平对齐方式 53 * context.textBaseline:垂直对齐方式 54 * context.measureText(text):计算字体长度(px) 55 */ 56 context.fillText(name_text, x, 450); 57 context.fillStyle = '#333'; // 文字填充颜色 58 context.font = '25px Baoli SC'; 59 var desc_1 = '功德无量'; 60 var desc_2 = '随缘乐助'; 61 /** 62 * text:要绘制的文字 63 * x:文字起点的x坐标轴 64 * y:文字起点的y坐标轴 65 */ 66 context.fillText(desc_1, x, 500); 67 var desc_width_2 = context.measureText(desc_2).width; 68 context.fillText(desc_2, canvas.width - x - desc_width_2, 500); 69 // 结束画图 70 context.stroke(); 71 // 将画布内容导出 72 var src = canvas.toDataURL(); 73 img3.src = src; 74 const a = document.createElement("a"); 75 a.href = src; 76 a.download = '自定义文件名.png'; 77 a.click(); 78 } 79 </script> 80 </body> 81 82 </html>