这里将介绍下微信小程序 绘图 canvas

上代码:1.

< html] view plain copy 1.
2.清除画布
3.导出图片

2.

css] view plain copy 1.Page {

1. background: #cfeeff;
   3.}
   4..canvas{
2. width: 100%;
3. height: 680rpx;
   7.}

3

[plain] view plain copy 1.{

1. “navigationBarTitleText”: “画板”,
2. “navigationBarBackgroundColor”: “#eee200”
   4.}

4

[javascript] view plain copy 1.// canvas 全局配置
2.var context = null;// 使用 wx.createContext 获取绘图上下文 context
3.var isButtonDown = false;
4.var arrx = [];
5.var arry = [];
6.var arrz = [];
7.var canvasw = 0;
8.var canvash = 0;
9.//获取系统信息
10.wx.getSystemInfo({

1. success: function (res) {
2. canvasw = res.windowWidth;//设备宽度
3. canvash = res.windowHeight;
4. }
   15.});
   16.//注册页面
   17.Page({
6. canvasIdErrorCallback: function (e) {
7. console.error(e.detail.errMsg)
8. },
9. canvasStart: function (event) {
10. isButtonDown = true;
11. arrz.push(0);
12. arrx.push(event.changedTouches[0].x);
13. arry.push(event.changedTouches[0].y);
14. //context.moveTo(event.changedTouches[0].x, event.changedTouches[0].y);
15. },
16. canvasMove: function (event) {
17. if (isButtonDown) {
18. arrz.push(1);
19. arrx.push(event.changedTouches[0].x);
20. arry.push(event.changedTouches[0].y);
21. // context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y);
22. // context.stroke();
23. // context.draw()
24. };
25. for (var i = 0; i < arrx.length; i++) {
26. if (arrz[i] == 0) {
27. context.moveTo(arrx[i], arry[i])
28. } else {
29. context.lineTo(arrx[i], arry[i])
30. };
31. };
32. context.clearRect(0, 0, canvasw, canvash);
33. context.stroke();
34. context.draw(true);
35. },
36. canvasEnd: function (event) {
37. isButtonDown = false;
38. },
39. cleardraw: function () {
40. //清除画布
41. arrx = [];
42. arry = [];
43. arrz = [];
44. context.clearRect(0, 0, canvasw, canvash);
45. context.draw(true);
46. },
47. getimg: function () {
48. if (arrx.length == 0) {
49. wx.showModal({
50. title: ‘提示’,
51. content: ‘签名内容不能为空！’,
52. showCancel: false
53. });
54. return false;
55. };
56. //生成图片
57. wx.canvasToTempFilePath({
58. canvasId: ‘canvas’,
59. success: function (res) {
60. console.log(res.tempFilePath);
61. //存入服务器
62. wx.uploadFile({
63. url: ‘a.php’, //接口地址
64. filePath: res.tempFilePath,
65. name: ‘file’,
66. formData: { //HTTP 请求中其他额外的 form data
67. ‘user’: ‘test’
68. },
69. success: function (res) {
70. console.log(res);
71. },
72. fail: function (res) {
73. console.log(res);
74. },
75. complete: function (res) {
76. }
77. });
78. }
79. })
80. },
81. /**
82. • 页面的初始数据
83. */
84. data: {
85. src: “”
86. },
88. /**
89. • 生命周期函数–监听页面加载
90. */
91. onLoad: function (options) {
92. // 使用 wx.createContext 获取绘图上下文 context
93. context = wx.createCanvasContext(‘canvas’);
94. context.beginPath()
95. context.setStrokeStyle(‘#ffff00’);
96. context.setLineWidth(10);
97. context.setLineCap(‘round’);
98. context.setLineJoin(‘round’);
99. },
101. /**
102. • 生命周期函数–监听页面初次渲染完成
103. */
104. onReady: function () {
106. },
108. /**
109. • 生命周期函数–监听页面显示
110. */
111. onShow: function () {
113. },
115. /**
116. • 生命周期函数–监听页面隐藏
117. */
118. onHide: function () {
120. },
122. /**
123. • 生命周期函数–监听页面卸载
124. */
125. onUnload: function () {
127. },
129. /**
130. • 页面相关事件处理函数–监听用户下拉动作
131. */
132. onPullDownRefresh: function () {
134. },
136. /**
137. • 页面上拉触底事件的处理函数
138. */
139. onReachBottom: function () {
141. },
143. /**
144. • 用户点击右上角分享
145. */
146. onShareAppMessage: function () {
148. }
     162.})