看了下小程序的畫布功能，簡單的使用了一下，用蹩腳的邏輯做了個 “彈啊彈，彈走魚尾紋的小球”，一起來看下吧。過程不重要主要是畫布的使用哦。（本來想傳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.