代码例子 

今天在百般的无聊中，去看了看小程序的api文档，抱着学习，增加点知识的态度下，又是很认真的看了一边各个api的说明和使用例子，看着看着就萌发了怎么一个想法，记得以前在H5时代的时候，要实现图片和文字结合，合成一张新的图片，这个得借助后台的能力，但今天我看小程序的api可以完全不借助后台的节奏，都能很好的完成怎么一个功能。

页面效果例子

这个小程序后续有机会，会跟大家见面，下面不多说直接上码：

1. <!--wxml部分-->
2. <view class="">
3. <view class="canvasStyle">
4. <canvas canvas-id="myCanvas" bindtouchstart="start"
5. bindtouchmove="move"/>
6. <view class="Canvas_Text"><image src="{{imageUrl}}"></image></view>
7. //这里是为了解决文字拖动时会有白光闪现
8. </view>
9. <view class="chooseImage">
10. <view class="Btn BtnImg_select" bindtap="chooseImageFun">先选择图片</view>
11. <view class="Input_text">
12. <input placeholder="请输入装逼内容" bindinput="InputFuns" />
13. </view>
14. <view wx:if="{{showst}}" class="Btn generateBtn" bindtap="Okgenerate">
15. 生成，并保存
16. <view>(当你点击生成的那一刻，恭喜你装逼生涯就此开始了)</view>
17. </view>
18. <view wx:if="{{!showst}}" class="Btn generateBtn grayBtn">
19. 生成，并保存
20. <view>(当你点击生成的那一刻，恭喜你装逼生涯就此开始了)</view>
21. </view>
22. </view>
23. </view>

1. const app = getApp()
2. const ctx = wx.createCanvasContext('myCanvas')
3. Page({
4. data: {
5. text_x: 20, //x轴
6. text_y:20, //y轴
7. imageUrl: '', // 生成的图片路径
8. showst:false, //是否完成图片和文字的填入
9. sytext: '', //文本
10. },
11. chooseImageFun(){ //选择图片
12. var _this = this
13. wx.chooseImage({
14. success: function (res) {
15. console.log(res)
16. _this.setData({
17. imageUrl: res.tempFilePaths[0]
18. })
19. ctx.drawImage(res.tempFilePaths[0], 6, 0, 189, 310)
20. ctx.draw()
21. }
22. })
23. },
24. InputFuns(e){ //文字
25. this.setData({
26. sytext: e.detail.value
27. })
28. ctx.setFontSize(14)
29. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)
30. ctx.draw(true)
31. this.setData({
32. showst:true
33. })
34. },
35. start(e){ // 手指开始接触移动
36. console.log(e)
37. this.setData({
38. text_x: e.touches[0].x,
39. text_y: e.touches[0].y
40. })
41. ctx.clearRect(0, 0, 200, 310)
42. ctx.draw()
43. ctx.drawImage(this.data.imageUrl, 6, 0, 189, 310) //重新画上
44. ctx.setFontSize(14)//重新画上字体大小
45. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)//重新画上
46. ctx.draw(true) //重新画上
47. },
48. move(e) { // 手指在移动
49. console.log(e)
50. this.setData({
51. text_x: e.touches[0].x,
52. text_y: e.touches[0].y
53. })
54. ctx.clearRect(0, 0, 200, 310) //清除画布上的内容
55. ctx.draw()
56. ctx.drawImage(this.data.imageUrl, 6, 0, 189, 310) //重新画上
57. ctx.setFontSize(14) //重新画上字体大小
58. ctx.fillText(this.data.sytext, this.data.text_x, this.data.text_y)//重新画上
59. ctx.draw(true)//重新画上
60. },
61. Okgenerate(){ //生成图片方法
62. var _this = this
63. this.setData({
64. showst: false
65. })
66. wx.canvasToTempFilePath({ //生成图片
67. x: 0,
68. y: 0,
69. width: 200,
70. h