<p>快来用厕所雷达吧</p>    <p>作为一个优秀的楼主，胖子我不仅写了代码，连广告次都想好了，哇咔咔咔~~~~ “厕所找的快，排的才痛快”。</p>    <p>练习区里看到一个“厕所雷达”就来做了下，主要还是为了练习小程序“控件的基本用法”和“页面间的交互”，CSS依旧让我感到头疼，不过比上次的demo“石头剪刀布”好了很多了HOHO。（PS：页面有好几个，就先贴上首页的代码吧，想看的小伙伴就下载一下然后咱们互相交流哦，注释都写好了的说。哦对了，新的分享功能也加进去了，当然广告词已经写在分享里了。）</p>    <p>下面直接上图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/6f15a784c276a38104f2ca85c3e73e51.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/709b54728d813428c4d31f88e8523398.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ca11041c86e7e57672506b458773289f.png"></p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0035d80749a56eceef76d668679adb59.png"></p>    <p>JS:</p>    <pre>  <code class="language-javascript">//index.js  var app = getApp()  var winHeight = 0  var winWidth = 0  Page({    data: {        //背景图片，现在没有        img:'/pages/image/123.png',        //确定左边距距离，上边距距离，厕所title，头像        dataArr:[{'left':200,'top':100,'title':'我家厕所最好','img':'/pages/image/1.png'},        {'left':20,'top':400,'title':'amis的小屋','img':'/pages/image/2.png'},        {'left':540,'top':440,'title':'老丁的宝盆','img':'/pages/image/3.png'},        {'left':240,'top':800,'title':'雪姐专用坑','img':'/pages/image/4.png'}]    },      //进页面后获取数据    onLoad: function () {      console.log('onLoad')      var that = this      //调用应用实例的方法获取全局数据      app.getUserInfo(function(userInfo){                console.log(userInfo)        //更新数据        that.setData({          userInfo:userInfo        })      })           //获取数据      wx.getSystemInfo({        success: function(res) {          console.log(res)          winHeight = res.windowHeight;          winWidth = res.windowWidth;        }      })        // 使用 wx.createContext 获取绘图上下文 context      var context = wx.createContext()      context.arc(winWidth/2, winHeight/2, 50, 0, 2 * Math.PI, true)      context.arc(winWidth/2, winHeight/2, 100, 0, 2 * Math.PI, true)      context.arc(winWidth/2, winHeight/2, 150, 0, 2 * Math.PI, true)      context.arc(winWidth/2, winHeight/2, 200, 0, 2 * Math.PI, true)      context.arc(winWidth/2, winHeight/2, 250, 0, 2 * Math.PI, true)      context.arc(winWidth/2, winHeight/2, 300, 0, 2 * Math.PI, true)        context.setStrokeStyle('red')      context.setLineWidth(1)      context.stroke()        // 调用 wx.drawCanvas，通过 canvasId 指定在哪张画布上绘制，通过 actions 指定绘制行为      wx.drawCanvas({        canvasId: 'radar',        actions: context.getActions() // 获取绘图动作数组      })    },      onShareAppMessage: function() {      // 用户点击右上角分享      return {        title: '厕所雷达', // 分享标题        desc: '厕所找的快，排的才痛快', // 分享描述        path: 'path' // 分享路径      }    }  })</code></pre>    <p>wxml:</p>    <pre>  <code class="language-javascript"><!--index.wxml-->  <canvas canvas-id="radar">  <image class="userinfo" src="{{userInfo.avatarUrl}}"></image>    <block wx:for="{{dataArr}}">      <navigator url="../logs/logs?title={{item.title}}&img={{item.img}}">          <view class="toiletView" style="left:{{item.left}}rpx;top:{{item.top}}rpx" bindtap="toiletDetails" id="{{index}}">              <image class="toiletView-image" src="{{item.img}}"></image>              <text class="toiletView-text">{{item.title}}</text>          </view>     </navigator>  </block>  </canvas></code></pre>    <p>wxss:</p>    <pre>  <code class="language-javascript">/**index.wxss**/  page{    background: black;    height: 100%;  }    canvas{      width: 100%;      height: 100%;  }    .userinfo {    position:absolute;    top: 561rpx;    left:311rpx;    width: 128rpx;    height: 128rpx;    border-radius: 50%;  }    .toiletView{    position:absolute;    width: 180rpx;    height: 180rpx;  }    .toiletView-image{      position:absolute;      left: 13px;      top: 0px;      width: 128rpx;      height: 128rpx;      border-radius: 50%;  }    .toiletView-text{    position:absolute;    bottom: 10rpx;    font-size: 30rpx;    color: orangered;    width: 180rpx;    text-align: center;  }</code></pre>    <p>雷达的背景图是没有的，只能用画板自己手动画了一个。</p>    <p> </p>    <p> </p>    <p>来自：https://segmentfault.com/a/1190000007995858</p>    <p> </p>