畫布

wx.createCanvas

TIP

該API使用方法為：wx.createCanvas()

• 功能說明： 建立一個畫布對象。首次呼叫創建的是顯示在螢幕上的畫布，之後調用創建的都是離螢幕畫布。
• 返回值： Canvas ，畫布對象。

Canvas

内容

• number width：畫布寬度。
• number height：畫布高度。

方法

Canvas.getContext

TIP

該API使用方法為：Canvas.getContext(string contextType, Object contextAttributes)

• 功能說明： 取得畫布對象的繪圖上下文。

• 參數及說明：

  • string contextType，上下文類型，合法值如下：

    合法值	說明
    2d	2d繪圖上下文
    webgl	webgl繪圖上下文
    webgl2	webgl2繪圖上下文

    • Object contextAttributeswebgl 上下文屬性，僅當 contextType 為 webgl 時有效。

    内容	類型	預設值	必填	說明
    antialias	boolean	false	否	表示是否抗鋸齒
    preserveDrawingBuffer	boolean	false	否	表示是否繪圖完成後保留繪圖緩衝區
    antialiasSamples	number	2	否	抗鋸齒樣本數。最小值為 2，最大不超過系統限制數量，僅 iOS 支持

• 返回值： RenderingContext 繪圖上下文。

Canvas.toDataURL

TIP

該API使用方法為：Canvas.toDataURL()

• 功能說明： 把畫布上的繪製內容以一個 data URI 的格式傳回。
• 返回值： string data URI 格式的字串。

RenderingContext

• 功能說明： 畫布對象的繪圖上下文。

  • 透過 Canvas.getContext('2d') 介面可以取得 CanvasRenderingContext2D 對象，實作了 HTML Canvas 2D Context 定義的大部分屬性、方法。
  • 透過 Canvas.getContext('webgl') 介面可以取得 WebGLRenderingContext 對象，實現了 WebGL 1.0 定義的所有屬性、方法、常數。
  • 透過 Canvas.getContext('webgl2') 介面可以取得 WebGL2RenderingContext 對象，實現了 WebGL 2.0 定義的所有屬性、方法、常數。

• 2d 介面支援情況

  iOS/Android 不支援的 2d 屬性和介面

  • globalCompositeOperation 不支援下列值： source-in source-out destination-atop lighter copy。如果使用，不會報錯，但是將得到與預期不符的結果。
  • isPointInPath
  • isPointInStroke
  • setLineDash
  • getLineDash
  • lineDashOffset
  • shadowColor
  • shadowBlur
  • shadowOffsetX
  • shadowOffsetY

• WebGL 介面支援情況

  壓縮紋理的支持

  • iOS 支援 pvr 格式
  • Android 支援 etc1 格式