看了下小程序的画布功能，简单的使用了一下，用蹩脚的逻辑做了个 “弹啊弹，弹走鱼尾纹的小球”，一起来看下吧。过程不重要主要是画布的使用哦。（本来想传gif的来着，后来发现不会传，就传个图片吧，想看的自己下载下来玩呦）

先上图，后上代码了：

js:

1. var winWidth = 0
2. var winHeight = 0
3. var diameter = 10
4. var time = 0
5.  
6. Page({
7. data:{
8. numX:1,
9. numY:1
10. },
11. xy:{
12. //小球的xy坐标
13. x:10,
14. y:10
15. },
16.  
17. onLoad:function(options){
18. //进来先获取手机的屏幕宽度和高度
19. wx.getSystemInfo({
20. success: function(res) {
21. console.log(res)
22. winHeight = res.windowHeight;
23. winWidth = res.windowWidth;
24. }
25. })
26. },
27.  
28. onReady:function(){
29. //循环滚动小球
30. for(var i=0;i<1;i++){
31. //随机一个滚动的速度
32. time = (1+Math.random()*10)
33. setInterval(this.move,time);
34. console.log(time)
35. }
36. },
37. move(){
38. //x
39. if(this.data.numX == 1){
40. this.xy.x++
41. }else{
42. this.xy.x--
43. }
44.  
45. //判断x轴的状态
46. if(this.xy.x == winWidth-diameter){
47. this.data.numX=2
48. }
49. if(this.xy.x == diameter){
50. this.data.numX=1
51. }
52.  
53. //y
54. if(this.data.numY == 1){
55. this.xy.y++
56. }else{
57. this.xy.y--
58. }
59.  
60. //判断y轴的状态
61. if(this.xy.y == 400-diameter){
62. this.data.numY=2
63. }
64. if(this.xy.y == diameter){
65. this.data.numY=1
66. }
67.  
68. //画图
69. this.ballMove(this.xy.x,this.xy.y);
70. },
71.  
72.  
73. ballMove(x,y){
74. // 使用 wx.createContext 获取绘图上下文 context
75. var context = wx.createContext()
76. // context.setShadow(0,1,6,'#000000')//阴影效果
77. context.setFillStyle("#FF4500")//球的颜色
78. context.setLineWidth(2)
79. context.arc(x, y, diameter, 0, 2 * Math.PI, true)
80. context.fill()
81.  
82. // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为
83. wx.drawCanvas({
84. canvasId: 'ball',
85. actions: context.getActions() // 获取绘图动作数组
86. })
87. }
88. })

wxml:

1.  
3. canvas-id="ball">
4.