微信小程序学习笔记（二）- 小程序中的canvas

        前段时间部门里面的前端同事，在熟悉微信小程序时遇到了一个坎，大概就是说小程序里面的canvas绘制图像不起做用。此次学习就以canvas为主题，试试看能不能解决这个问题。
先扔两个传送门在这里：javascript

        文档·小程序canvas标签html

        文档·小程序api-canvas前端

        而后先仿照着官方文档在canvas标签里面画最简单的线条图形，官方是一个笑脸，我准备画一个弯月。java

1、小程序绘制线条图形canvas

        代码：
小程序

<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="wxCanvasTest1"></canvas>

// canvas.js
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {

    //使用wx.createContext获取绘图上下文context
    var context = wx.createContext()

    context.setStrokeStyle("#FFD700")
    context.setLineWidth(2)
    context.arc(100, 100, 60, -Math.PI/2, Math.PI, false)
    context.moveTo(100, 40)
    context.arc(65.36, 100, 69.28, -Math.PI/3, 2*Math.PI/3, false)
    context.stroke()

    //调用wx.drawCanvas，经过canvasId指定在哪张画布上绘制，经过actions指定绘制行为
    wx.drawCanvas({
      canvasId: 'wxCanvasTest1',
      actions: context.getActions() //获取绘图动做数组
    })
  }
}) 

        运行调试结果：微信小程序

        至此，算是对小程序的canvas标签和绘图api有了初步的了解，而后试着调试一下博文开头提到的问题，微信canvas绘图不起做用api

2、小程序绘制图像数组

        稍微改了一下官方的示例代码：微信

<!--drawimage.wxml -->
<canvas canvas-id="1"  class="canvas" />

//drawCanvas.js
Page({
  onReady: function(e) {
    var context = wx.createContext()
    wx.chooseImage({
      sizeType: ['compressed'],
      success: function(res) {
        context.drawImage(res.tempFilePaths[0], 20, 20,250,140)
        // context.rotate(5 * Math.PI / 180)
        wx.drawCanvas({
          canvasId: 1,
          actions: context.getActions()
        })
      }
    })
  }
})

          调试成功！下一步尝试对图片进行简单处理（如旋转）

context.rotate(5 * Math.PI / 180)

          至此学习目的达成，遗憾的是微信小程序的绘图功能有限，不能对图像进行矩阵变换等处理，所以不能适用更多的需求。但愿之后微信能开放更多的功能！