画布

优质

小牛编辑

134浏览

2023-12-01

属性	类型	默认值	必填	说明
type	string		否	指定 canvas 类型，支持 2d，基础库版本1.10.11开始支持2d和webgl
canvas-id	string		否	canvas 组件的唯一标识符
disableScroll	Boolean	false	否	当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新
bindtouchstart				手指触摸动作开始
bindtouchmove				手指触摸后移动
bindtouchend				手指触摸动作结束
bindtouchcancel				手指触摸动作被打断，如来电提醒，弹窗
bindlongtap				手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动
binderror				当发生错误时触发 error 事件，detail = {errMsg}

Canvas 2D 示例代码

 <!-- canvas.jxml -->
  <canvas type="2d" id="canvas2D"></canvas>

// canvas.js
Page({
  onReady() {
    jd.createSelectorQuery()
        .select('#canvas2D')
        .fields({
          node: true,
          size: true,
        })
        .exec(this.init.bind(this))
  },
 init(res) {
    const width = res[0].width
    const height = res[0].height
    const canvas = res[0].node
    const ctx = canvas.getContext('2d')
    const dpr = jd.getSystemInfoSync().pixelRatio
    canvas.width = width * dpr
    canvas.height = height * dpr
    ctx.scale(dpr, dpr)
    ctx.fillRect(10, 10, 305, 305)
  },
})

WebGL 示例代码

  <!-- canvas.jxml -->
  <canvas type="webgl" id="canvasWebGL"></canvas>

// canvas.js
Page({
  onReady() {
     jd.createSelectorQuery()
       .select('#canvasWebGL')
       .node()
       .exec((res) => {
         const canvas = res[0].node
         this.renderWebGL(canvas)
       })
   },
  renderWebGL(canvas) {
     const gl = canvas.getContext('webgl')
     gl.clearColor(1, 0.3, 0.3, 1)
     gl.clear(gl.COLOR_BUFFER_BIT)
   },
 })