摘要：緊急情況找不到廁所晴天霹靂褲衩一聲完嘍快來用廁所雷達吧。練習區里看到一個廁所雷達就來做了下，主要還是為了練習小程序控件的基本用法和頁面間的交互，依舊讓我感到頭疼，不過比上次的石頭剪刀布好了很多了。來自微信小程序聯盟

緊急情況~ 找不到廁所？ 晴天霹靂 褲衩一聲？ 完嘍快來用廁所雷達吧~。作為一個優秀的樓主，胖子我不僅寫了代碼，連廣告次都想好了，哇咔咔咔~~~~ “廁所找的快，排的才痛快”。

練習區里看到一個“廁所雷達”就來做了下，主要還是為了練習小程序“控件的基本用法”和“頁面間的交互”，CSS依舊讓我感到頭疼，不過比上次的demo“石頭剪刀布”好了很多了HOHO。（PS：頁面有好幾個，就先貼上首頁的代碼吧，想看的小伙伴就下載一下然后咱們互相交流哦，注釋都寫好了的說。哦對了，新的分享功能也加進去了，當然廣告詞已經寫在分享里了。）

下面直接上圖：

JS:

//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" // 分享路徑
    }
  }
})

wxml:

    
        
            
            {{item.title}}
        
   

wxss:

/**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;
}

Demo：http://pan.baidu.com/s/1pKUpRYV
雷達的背景圖是沒有的，只能用畫板自己手動畫了一個。

來自：微信小程序聯盟