小程序：画布canvas和媒体类组件实例总结

小程序的绘图组件与html5里的canvas是类似的，而媒体类组件常用的有音频audio、相机camera、视频video等。下面就用例子说明每一个具体组件的用法和常用属性用法解析。

1.画布canvas

canvas可以用来绘制图形和动画，图形和动画的具体实现要借助API wx.createCanvasContext， wx.createCanvasContext返回一个canvas对象，它有很多的绘图方法，例如描边、设置描边宽度、画矩形、圆形等。

新建一个项目，pages目录下新建canvas目录。

在canvas.wxml中使用canvas组件，呈现出画布。如下：

<!-- canvas.wxml -->
<!-- canvas-id:canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性 -->
<canvas style="width: 100%; height: 350px;background:blue;" canvas-id="firstCanvas"></canvas>

需要注意的是，canvas标签默认宽度300px，高度150px，自己还可以指定宽度和高度。

在canvas.js中写绘图实现代码，实现步骤如下：

1.首先通过小程序API wx.createCanvasContext('canvasID')获取创建canvas的绘图上下文context对象。

2.通过context对象使用绘图方法。如先使用context.setStrokeStyle("#FF83FA")设置描边颜色，然后setLineWidth()设置描边宽度，接下来rect()方法绘制矩形。

3.将想要绘制的图形如何画描述完成以后，使用draw()方法绘制上下文中的描述，画到画布canvas中。

代码虽有30多行，但过半是注释。如：

Page({
   
  onReady: function (e) {
   
    // 使用 wx.createContext 获取绘图上下文 context
    // createCanvasContext:创建canvas的绘图上下文CanvasContext对象
    var context = wx.createCanvasContext('firstCanvas')

    // 设置描边颜色
    context.setStrokeStyle("#ff0000")

    //设置线条的宽度
    context.setLineWidth(2)

    // CanvasContext.moveTo(number x, number y)：
    // 把路径移动到画布中的指定点，不创建线条。用 stroke 方法来画线条
    context.moveTo(160, 100)

    // arc：创建一条弧线。
    //创建一个圆可以指定起始弧度为 0，终止弧度为 2 * Math.PI。
   // 用 stroke 或者 fill 方法来在 canvas 中画弧线
  
    //按规定的起始和终止弧度，在圆心(100,100)绘制半径是60的圆弧，最后一个参数表示弧度方向是否是逆时针
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(