小程序开发实例：指南针(1)

介绍完了 HelloLightApp 之后，就开始进入练习阶段。本课程篇幅有限，我们只做一个最简单的小程序——指南针。

指南针小程序也包括两个画面，本文先介绍第一个画面。

主画面

画面的标题为“Compass”，内容分上下两部分，上面是一个动态的指南针，下面是现在方向的角度。

动态指南针的中心是一个指向上方的指针，周围是一个指示方向的文字盘。将手机水平放置时，红色指针指向的就是现在的方向。

下面的数字是当前方向的角度，0 度为正北方向。

画布（Canvas）的用法

由于指南针需要动态表示指南针文字盘，所以需要使用小程序中的绘图机制——画布（Canvas）。这里的画布只是一个提法，实际上就是用来绘图的一小片区域。

微信小程序中 Canvas 的用法分为两步。

在页面文件 WXML 中创建 Canvas 组件并指定 id 和尺寸（高度和宽度）

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

本例中 Canvas 的 id 为 compassCavas，高度和宽度都是