2.4 地图组件和画布组件

地图组件和画布组件是非常重要的两个组件，尤其是画布组件，市场中的大量小程序应用都是基于画布组件制作的。画布组件虽然在小程序刚推出的时候非常难用，甚至出现了大量的bug，但是对图片处理和动画绘制而言，Canvas组件是必须要使用的，也是唯一能使用的。

2.4.1 地图组件：map

和Camera组件、Canvas组件一样，map组件同样属于原生组件，默认会出现在所有的普通组件上方。当然，由于苹果方面对地理位置等信息的使用要求，现在要获得用户的位置信息需要用户同意。

相对于原生地图组件而言，腾讯提供的地图元素并不是很多，只是地图信息的显示和一个到多个标记点的标记功能。更加个性化的元素不能自主添加在地图上，需要使用个性化地图才可以使用个性化的地图服务（该原生个性化地图服务不能在开发者工具上调试）。

原生地图组件（map组件）支持的属性很多，如表2-9所示。

表2-9 map组件属性

注意：个性化地图能力可在小程序后台“设置→开发者工具→腾讯位置服务”中申请开通。这些新功能都是基于腾讯位置服务的，需要使用相关的授权和进行手机号绑定等操作，而后直接使用小程序的subkey配置即可。详细的申请和文档可以查看如下网址：https://lbs.qq.com/product/miniapp/guide/。

2.4.2 画布组件：Canvas和API：wx.createCanvasContext

画布组件是一个非常有用的组件，也可能是所有的原生组件中使用最多的组件之一。和HTML中的Canvas相比，虽然两者的共同点很多，但是大部分API方法依旧不通用，这意味着，大量HTML中提供的Canvas库并不能在小程序中使用，而小程序中的Canvas提供的API相对原始，且在使用中可能会出现少量bug—请注意。

注意：Canvas同样属于原生组件，使用时会覆盖在其他组件上，而且在测试时，cover组件可能在Canvas从隐藏到显示时出现无法覆盖Canvas的情况。

Canvas本身的引用非常简单，只需要使用如下代码就可以应用在整个页面中。

＜canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"＞＜/canvas＞

canvas-id是必须配置的，否则在下方的JavaScript代码中无法获得该组件的实例。同样，canvas可以指定其宽度和高度，并且设置其是否处于隐藏状态。

该Canvas的绘图上下文CanvasContext对象是通过Canvas的API wx.createCanvasContext获得的。获得上述代码的上下文可直接使用如下代码。

const canvas = wx.createCanvasContext（'firstCanvas'）

在画布中绘制图形也非常简单。在获取上下文之后调用绘图方法，然后直接调用draw（）方法绘制，如下所示。

const ctx = wx.createCanvasContext（'myCanvas'）

ctx.setFillStyle（'red'）
ctx.fillRect（10，10，150，100）
ctx.draw（）
ctx.fillRect（50，50，150，100）
ctx.draw（true）

这样就绘制了两个重叠的矩形，如图2-8所示。Canvas支持的绘制方法如表2-10所示。

图2-8 绘制Canvas

表2-10 Canvas支持的绘制方法

续表

续表

小程序的Canvas为我们提供了基础的绘图方式，虽然看上去只能绘制线、面、路径等，但其实所有复杂的图像和图形都是这些基础的元素组合拼接而成的。如何合理应用这些方法，是开发者应当考量的。

注意：Canvas的实例请参考第8章。