title: Taro.createCanvasContext(canvasId, component)

sidebar_label: createCanvasContext

创建 canvas 的绘图上下文 CanvasContext 对象

Tip: 需要指定 canvasId，该绘图上下文只作用于对应的 <canvas/>

支持情况：createCanvasContext - 图1 createCanvasContext - 图2 createCanvasContext - 图3

参考文档

类型

  1. (canvasId: string, component?: TaroGeneral.IAnyObject) => CanvasContext

参数

参数 类型 说明
canvasId string 要获取上下文的 canvas 组件 canvas-id 属性
component TaroGeneral.IAnyObject 在自定义组件下，当前组件实例的this，表示在这个自定义组件下查找拥有 canvas-id 的 canvas ，如果省略则不在任何自定义组件内查找

示例代码

  1. const context = Taro.createCanvasContext('canvas')
  3. context.setStrokeStyle("#00ff00")
  4. context.setLineWidth(5)
  5. context.rect(0, 0, 200, 200)
  6. context.stroke()
  7. context.setStrokeStyle("#ff0000")
  8. context.setLineWidth(2)
  9. context.moveTo(160, 100)
  10. context.arc(100, 100, 60, 0, 2 * Math.PI, true)
  11. context.moveTo(140, 100)
  12. context.arc(100, 100, 40, 0, Math.PI, false)
  13. context.moveTo(85, 80)
  14. context.arc(80, 80, 5, 0, 2 * Math.PI, true)
  15. context.moveTo(125, 80)
  16. context.arc(120, 80, 5, 0, 2 * Math.PI, true)
  17. context.stroke()
  18. context.draw()