欢迎光临,了解微信小程序开发,就上易用通!

当前位置 : 易用通 > 小程序模板
厕所雷达;Canvas【厕所找的快,排的才痛快】厕所雷达;Canvas【厕所找的快,排的才痛快】
立即下载

厕所雷达;Canvas【厕所找的快,排的才痛快】

模板分类 : 小程序模板 模板编号 : Y206 源码文件 : 完全开源 下载权限 : VIP会员
模板大小 :  模板指数 :  更新时间 : 2018-01-16 16:21 模板等级 : ☆☆☆☆☆

模板截图:

紧急情况~ 找不到厕所? 晴天霹雳 裤衩一声? 完喽~~快来用厕所雷达吧~~~。作为一个优秀的楼主,胖子我不仅写了代码,连广告次都想好了,哇咔咔咔~~~~  “厕所找的快,排的才痛快”。 练习区里看到一个“厕所雷达”就来做了下,主要还是为了练习小程序“控件的基本用法”和“页面间的交互”,CSS依旧让我感到头疼,不过比上次的demo“石头剪刀布”好了很多了HOHO。(PS:页面有好几个,就先贴上首页的代码吧,想看的小伙伴就下载一下然后咱们互相交流哦,注释都写好了的说。哦对了,新的分享功能也加进去了,当然广告词已经写在分享里了。) 厕所雷达;Canvas【厕所找的快,排的才痛快】(图1)  下面直接上图: 厕所雷达;Canvas【厕所找的快,排的才痛快】(图2)  厕所雷达;Canvas【厕所找的快,排的才痛快】(图3)  厕所雷达;Canvas【厕所找的快,排的才痛快】(图4)  厕所雷达;Canvas【厕所找的快,排的才痛快】(图5)  JS
  1. //index.js
  2. var app = getApp()
  3. var winHeight = 0
  4. var winWidth = 0
  5. Page({
  6.   data: {
  7.       //背景图片,现在没有
  8.       img:\'/pages/image/123.png\',
  9.       //确定左边距距离,上边距距离,厕所title,头像
  10.       dataArr:[{\'left\':200,\'top\':100,\'title\':\'我家厕所最好\',\'img\':\'/pages/image/1.png\'},
  11.       {\'left\':20,\'top\':400,\'title\':\'amis的小屋\',\'img\':\'/pages/image/2.png\'},
  12.       {\'left\':540,\'top\':440,\'title\':\'老丁的宝盆\',\'img\':\'/pages/image/3.png\'},
  13.       {\'left\':240,\'top\':800,\'title\':\'雪姐专用坑\',\'img\':\'/pages/image/4.png\'}]
  14.   },
  15.  
  16.   //进页面后获取数据
  17.   onLoad: function () {
  18.     console.log(\'onLoad\')
  19.     var that = this
  20.     //调用应用实例的方法获取全局数据
  21.     app.getUserInfo(function(userInfo){
  22.               console.log(userInfo)
  23.       //更新数据
  24.       that.setData({
  25.         userInfo:userInfo
  26.       })
  27.     })
  28.  
  29.     //获取数据
  30.     wx.getSystemInfo({
  31.       success: function(res) {
  32.         console.log(res)
  33.         winHeight = res.windowHeight;
  34.         winWidth = res.windowWidth;
  35.       }
  36.     })
  37.  
  38.     // 使用 wx.createContext 获取绘图上下文 context
  39.     var context = wx.createContext()
  40.     context.arc(winWidth/2, winHeight/2, 50, 0, 2 * Math.PI, true)
  41.     context.arc(winWidth/2, winHeight/2, 100, 0, 2 * Math.PI, true)
  42.     context.arc(winWidth/2, winHeight/2, 150, 0, 2 * Math.PI, true)
  43.     context.arc(winWidth/2, winHeight/2, 200, 0, 2 * Math.PI, true)
  44.     context.arc(winWidth/2, winHeight/2, 250, 0, 2 * Math.PI, true)
  45.     context.arc(winWidth/2, winHeight/2, 300, 0, 2 * Math.PI, true)
  46.  
  47.     context.setStrokeStyle(\'red\')
  48.     context.setLineWidth(1)
  49.     context.stroke()
  50.   
  51.     // 调用 wx.drawCanvas,通过 canvasId 指定在哪张画布上绘制,通过 actions 指定绘制行为
  52.     wx.drawCanvas({
  53.       canvasId: \'radar\',
  54.       actions: context.getActions() // 获取绘图动作数组
  55.     })
  56.   },
  57.   onShareAppMessage: function() {
  58.     // 用户点击右上角分享
  59.     return {
  60.       title: \'厕所雷达\', // 分享标题
  61.       desc: \'厕所找的快,排的才痛快\', // 分享描述
  62.       path: \'path\' // 分享路径
  63.     }
  64.   }
  65. })
复制代码
  1. <span style="color: rgb(255, 0, 0); font-family: 'Microsoft Yahei', Simsun; line-height: 28px; background-color: rgb(255, 255, 255);">wxml:</span>
复制代码
wxss:
  1. /**index.wxss**/
  2. page{
  3.   background: black;
  4.   height: 100%;
  5. }
  6.  
  7. canvas{
  8.     width: 100%;
  9.     height: 100%;
  10. }
  11.  
  12. .userinfo {
  13.   position:absolute;
  14.   top: 561rpx;
  15.   left:311rpx;
  16.   width: 128rpx;
  17.   height: 128rpx;
  18.   border-radius: 50%;
  19. }
  20.  
  21. .toiletView{
  22.   position:absolute;
  23.   width: 180rpx;
  24.   height: 180rpx;
  25. }
  26.  
  27. .toiletView-image{
  28.     position:absolute;
  29.     left: 13px;
  30.     top: 0px;
  31.     width: 128rpx;
  32.     height: 128rpx;
  33.     border-radius: 50%;
  34. }
  35.  
  36. .toiletView-text{
  37.   position:absolute;
  38.   bottom: 10rpx;
  39.   font-size: 30rpx;
  40.   color: orangered;
  41.   width: 180rpx;
  42.   text-align: center;
  43. }
复制代码
雷达的背景图是没有的,只能用画板自己手动画了

加入收藏
立即下载
分享到微信朋友圈
X

免责声明:

1. 本站所有素材(未指定商用),仅限学习交流,请勿用于商业用途。
2. 本站所有小程序模板Demo和图片均来自用户分享上传和网络收集,模板和图片版权归原作者及原出处所有。
3. 未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材。