介紹完了 HelloLightApp 之后，就開始進入練習(xí)階段。本課程篇幅有限，我們只做一個最簡單的小程序——指南針。

指南針小程序也包括兩個畫面，本文先介紹第一個畫面。

主畫面

畫面的標(biāo)題為“Compass”，內(nèi)容分上下兩部分，上面是一個動態(tài)的指南針，下面是現(xiàn)在方向的角度。

動態(tài)指南針的中心是一個指向上方的指針，周圍是一個指示方向的文字盤。將手機水平放置時，紅色指針指向的就是現(xiàn)在的方向。

下面的數(shù)字是當(dāng)前方向的角度，0 度為正北方向。

畫布（Canvas）的用法

由于指南針需要動態(tài)表示指南針文字盤，所以需要使用小程序中的繪圖機制——畫布（Canvas）。這里的畫布只是一個提法，實際上就是用來繪圖的一小片區(qū)域。

微信小程序中 Canvas 的用法分為兩步。

在頁面文件 WXML 中創(chuàng)建 Canvas 組件并指定 id 和尺寸（高度和寬度）

   <canvas style="width: 300px; height: 300px;"canvas-id="myCanvas"></canvas>

本例中 Canvas 的 id 為 compassCavas，高度和寬度都是 300px。

使用 Canvas 進行繪圖<