光顯示數字當然沒什麼意思，我們稍加修改，爭取把這個小程式弄的像真的一樣。

建立/新增影象資源

首先用Word畫，然後轉換成png。

接下來在小程式工程中新增images目錄，將png檔案拷貝到該目錄中。

index.wxml

<!--index.wxml-->

<viewclass="container">

<!-- canvas.wxml -->

<canvasstyle="width: 300px; height: 300px;"canvas-id="compassCanvas"></canvas>

<viewclass=

<textclass="angle_text">{{angle}}</text>

</view>

</view>

新增一個名為compassCanvas，寬和高都是300px的canvas.

index.js

//logs.js

Page({

 data: {

   angle:'--',  

 },

//指南針描畫

 drawCompass:function(direction) {

varcenter_x =150

varcenter_y =150

// 使用 wx.createContext 獲取繪圖上下文 context

var

//根據角度旋轉座標系

   context.translate(center_x, center_y);

   context.rotate(-direction /180* Math.PI);

   context.translate(-center_x, -center_y);

//描畫方向轉盤

   context.drawImage('../../images/compass-1.png',0,0,

                     center_x *2, center_y *2)

//恢復座標系

   context.translate(center_x, center_y);

   context.rotate(direction /180* Math.PI);

   context.translate(-center_x, -center_y);

//描畫指標。

   context.beginPath()

   context.setLineWidth(5)

   context.setStrokeStyle('red')

   context.moveTo(140,112)

   context.lineTo(150,60)

   context.lineTo(160,112)

   context.closePath()

   context.stroke()

   context.draw()

 },

//事件處理函式

 onLoad:function() {

varthat =this;

   wx.onCompassChange(function(res) {

//保留1位小數

vardirection = res.direction.toFixed(1) +'°';

     that.setData({ angle: direction})

     that.drawCompass(res.direction);

   }); 

 },

})

drawCompass函式

首先通過以canvas中心為軸旋轉座標系，旋轉角度角度是負的羅盤角度。這裡包含了一個角度到弧度的轉換。接下來描畫指南針錶盤就簡單了。

在這個小程式中，錶盤轉而指標不動，所以首先將座標系再轉回來，最後描畫指標。

onLoad函式

在onCompassChange的處理函式中，除了設定angle資料之外，同時呼叫的上面的drawCompass函式。

雖然說要弄得和真的一樣，但這畢竟只是一個練習，我們見好就收，點到為止。

參考資料

canvas繪圖介面：

https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html

寫在文章的最後

既然已經讀到這裡了，拜託大家再用一分鐘時間，將文章轉發到各位的朋友圈，微信群中。本公眾號的成長需要您的支援！

以上就是今天的文章，歡迎點贊並推薦給您的朋友！

閱讀更多更新文章，請掃描下面二維碼，關注微信公眾號【面向物件思考】