微信小程序之画布

1. canvas 标签默认宽度300px、高度225px
2. 同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作

属性名	类型	默认值	说明
canvas-id	String		canvas 组件的唯一标识符
disable-scroll	Boolean	false	当在 canvas 中移动时，禁止屏幕滚动以及下拉刷新
bindtouchstart	EventHandle		手指触摸动作开始
bindtouchmove	EventHandle		手指触摸后移动
bindtouchend	EventHandle		手指触摸动作结束
bindtouchcancel	EventHandle		手指触摸动作被打断，如来电提醒，弹窗
bindlongtap	EventHandle		手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror	EventHandle		当发生错误时触发 error 事件，detail = {errMsg: 'something wrong'}

实例：

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

　　js：

//index.js
//获取应用实例
var app = getApp()
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {

    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createContext()
    // 设置边框颜色
    context.beginPath()        
    context.setStrokeStyle("red")
    context.setLineWidth(2)
    context.rect(50, 0, 200, 200)
    context.stroke()
    context.closePath();

    context.beginPath();
    // 设置阴影setShadow(x偏移,y偏移,模糊度0-100,"blue")
    context.setShadow(10,-10,2,"blue")

    context.setStrokeStyle("green")
    context.setLineWidth(2)
   
    context.moveTo(210, 100)
    context.arc(150, 100, 60, 0, 2 * Math.PI, true)

    context.moveTo(190, 100)
    context.arc(150, 100, 40, 0, Math.PI, false)

    context.moveTo(135, 80)    
    context.arc(130, 80, 5, 0, 2 * Math.PI, true)

    context.moveTo(175, 80)
    context.arc(170, 80, 5, 0, 2 * Math.PI, true)

    context.stroke()

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

效果如下图　

　

具体方法：

wx.createCanvasContext(canvasID)

指定canvasID, 创建canvas绘图的上下文

setFillStyle（“color”）

设置填充色

setStrokeStyle

设置边框颜色

setShadow

设置阴影

offsetX	阴影相对于形状在水平方向的偏移
offsetY	阴影相对于形状在竖直方向的偏移
blur	阴影的模糊级别（取值范围0-100）
color	阴影的颜色

createLinearCradient（x0, y0, x1, y1