使用h5画图制作海报 

 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>

 

posted @ 2019-07-01 18:38  幺丸  阅读(629)  评论(0)    收藏  举报