Canvas 畫布

• 功能說明: 畫布，該組件是 原生組件 ，使用時請注意相關限制，相關API可參見 畫布，該組件是 wx.createCanvasContext ，現支持新Canvas 2D介面，舊版接口不再維護。

• 參數及說明：:

内容	類型	預設值	說明
type	string	2d	支持canvas類型，現時僅支持2d
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'}

TIP

• canvas標籤默認寬度300px、高度150px。
• 同一頁面中的canvas-id不可重複，如果使用一個已經出現過的canvas-id，該canvas標籤對應的畫布將被隱藏並不再正常工作。
• 避免設定過大的寬高，在安卓下會有crash的問題。
• 舊版canvas接口使用canvas-id内容唯一標識canvas； 新版Canvas 2D可直接使用id標識。
• 舊版canvas接口使用wx.createCanvasContext同步獲取CanvasContext，新版Canvas 2D接口需要先通過SelectorQuery非同步獲取Canvas對象，再通過Canvas.getContext獲取渲染上下文RenderingContext。
• 舊版canvas接口的畫布大小是根據實際渲染寬度决定的，開發者無法修改，新版Canvas 2D接口允許開發者自由修改畫布的邏輯大小，默認寬高為300*150，不同的設備上，存在物理點數和邏輯點數不相等的情况，所以一般我們需要用wx.getWindowInfo獲取設備的點數比，乘上canvas的實際大小。

• 示例代碼： (new API):

wxml:

<canvas type="2d" id="myCanvas"></canvas>

javascript:

Page({
  onReady() {
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const canvas = res[0].node
        const ctx = canvas.getContext('2d')

        const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)

        ctx.fillRect(0, 0, 100, 100)
      })
  }
})

• 示例代碼： (old API):

wxml:

<!-- canvas.wxml -->
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
<!-- When using absolute positioning, the canvas at the back of the document flow is displayed at a higher level than the canvas at the front -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
<!-- Because the canvas-id is the same as the previous canvas, the canvas will not be displayed and an error event will be sent to AppService -->
<canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>

javescript:

Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  onReady: function (e) {
    // Uses wx.createContext to get the Canvas context
    var context = wx.createCanvasContext('firstCanvas')

    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    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(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  }
})