小程序模板网

微信小程序中setInterval的使用

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

 
 
 

看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 “弹啊弹,弹走鱼尾纹的小球”,一起来看下吧。过程不重要主要是画布的使用哦。(本来想传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.  
  2. canvas-id="ball">
  3.  


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18318.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询