小程序js绘制海报

使用小程序画布js代码如下：

1. onLoad: function (options) {

2. var that = this;

3. //1. 请求后端API生成小程序码

4. //that.getQr();

5.  

6. //2. canvas绘制文字和图片

7. const ctx = wx.createCanvasContext('myCanvas');

8. var imgPath = '../../../image/intro.jpg';

9. var bgImgPath = '../../../image/bgImgPath.jpg';

10. var basicprofile ='../../../image/basicprofile.png';

11. var xcxcode ="http://localhost/mining120/public/static/xcxcode/29-5.jpeg";

12.  

13. //填充背景

14. ctx.setFillStyle('#cccccc');

15. ctx.fillRect(0, 0, 240, 360);

16. ctx.setFillStyle('#ffffff');

17. ctx.fillRect(1, 1, 238, 358);

18.  

19. //绘制产品图

20. ctx.drawImage(imgPath, 2, 2, 236, 200);

21.  

22. //绘制标题

23. ctx.setFontSize(16);

24. ctx.setFillStyle('#000000');

25. ctx.fillText('圆通删掉贷方金额', 10, 225);

26.  

27. //绘制介绍产品

28. ctx.setFontSize(12);

29. ctx.setFillStyle('#6F6F6F');

30. ctx.fillText('宠友们快来围观萌宠靓照我在萌爪幼稚园', 10, 250);

31. ctx.fillText('我在萌爪幼稚园', 10, 270);

32.  

33. //绘制一条虚线

34.  

35. ctx.strokeStyle = 'blue';

36. ctx.beginPath();

37. ctx.setLineWidth(1);

38. ctx.setLineDash([2, 4]);

39. ctx.moveTo(10, 287);

40. ctx.lineTo(230, 287);

41. ctx.stroke();

42.  

43. //绘制矿业人图标

44. ctx.drawImage(basicprofile, 10, 310, 30, 30);

45.  

46. //绘制介绍

47. ctx.setFontSize(11);

48. ctx.setFillStyle('#aaaaaa');

49. ctx.fillText('长按扫码查看详情', 47, 318);

50. ctx.fillText('分享自矿业人小程序', 47, 338);

51. ctx.drawImage(xcxcode, 165, 295, 60, 60);

52.  

53. ctx.draw();

54.  

55. },

    wxml代码如下：

1. <canvas style="margin:0 auto;margin-bottom:30px;width: 240px; height: 360px;box-shadow:1px 2px 2px #ccc;border-raidus:1px;" canvas-id="myCanvas"></canvas>

2.  

3. <view class='ft'>保存图片到手机相册，分享到朋友圈</view>

4. <view style="text-align:center;padding-bottom:20px"><button bindtap='savetup' type="primary" size='mini'>保存到相册</button></view>

5. </view>

保存图片代码：

1. savetup:function(){

2. var that = this;

3. wx.canvasToTempFilePath({

4. x: 0,

5. y: 0,

6. width: 240,

7. height: 360,

8. destWidth: 240,

9. destHeight: 360,

10. canvasId: 'myCanvas',

11. success: function (res) {

12. //调取小程序当中获取图片

13. console.log(res.tempFilePath);

14. wx.saveImageToPhotosAlbum({

15. filePath: res.tempFilePath,

16. success(res) {

17. wx.showModal({

18. title: '存图成功',

19. content: '图片成功保存到相册了，去发圈噻~',

20. showCancel: false,

21. confirmText: '好哒',

22. confirmColor: '#72B9C3',

23. success: function (res) {

24. if (res1.confirm) {

25. console.log('用户点击确定');

26. }

27. }

28. })

29. }

30. })

31. },

32. fail: function (res) {

33. console.log(res)

34. }

35. })

36. 转载地址：https://blog.csdn.net/qq_37375882/article/details/79419596