微信小程序画布组件

素颜马尾好姑娘i 2021-09-08 09:58 687阅读 0赞

[完整**微信小程序(Java后端) 技术贴**目录清单页面（必看）][Java_]

画布组件，我们可以做一些绘图和动画效果。2.9.0 起支持一套新 Canvas 2D 接口（需指定 type 属性），同时支持[同层渲染][Link 1]，原有接口不再维护。相关api：[获取 canvas 实例][canvas]。

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">类型</th> 
   <th align="left">默认值</th> 
   <th align="left">必填</th> 
   <th align="left">说明</th> 
   <th align="left">最低版本</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">type</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">指定 canvas 类型，支持 2d (2.9.0) 和 webgl (2.7.0)</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">2.7.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">canvas-id</td> 
   <td align="left">string</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">canvas 组件的唯一标识符，若指定了 type 则无需再指定该属性</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">disable-scroll</td> 
   <td align="left">boolean</td> 
   <td align="left">false</td> 
   <td align="left">否</td> 
   <td align="left">当在 canvas 中移动时且有绑定手势事件时，禁止屏幕滚动以及下拉刷新</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindtouchstart</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">手指触摸动作开始</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindtouchmove</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">手指触摸后移动</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindtouchend</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">手指触摸动作结束</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindtouchcancel</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">手指触摸动作被打断，如来电提醒，弹窗</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">bindlongtap</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">手指长按 500ms 之后触发，触发了长按事件后进行移动不会触发屏幕的滚动</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
  <tr> 
   <td align="left">binderror</td> 
   <td align="left">eventhandle</td> 
   <td align="left"></td> 
   <td align="left">否</td> 
   <td align="left">当发生错误时触发 error 事件，detail = {errMsg}</td> 
   <td align="left"><a href="https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html" rel="nofollow">1.0.0</a></td> 
  </tr> 
 </tbody> 
</table>

**Bug & Tip**

1.  `tip`：canvas 标签默认宽度300px、高度150px
2.  `tip`：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将被隐藏并不再正常工作
3.  `tip`：请注意[原生组件使用限制][Link 2]
4.  `tip`：开发者工具中默认关闭了 GPU 硬件加速，可在开发者工具的设置中开启“硬件加速”提高 WebGL 的渲染性能
5.  `tip`: WebGL 支持通过 getContext(‘webgl’, \{ alpha: true \}) 获取透明背景的画布
6.  `tip`: Canvas 2D（新接口）需要显式设置画布宽高 (默认为 300x150)
7.  `bug`: 避免设置过大的宽高，在安卓下会有crash的问题

**Canvas 2D 示例代码**

[在开发者工具中预览效果][Link 3]

index.wxml

index.js

const app = getApp()
    
    Page({ 
      data: { },
    
      onLoad: function () { 
        this.position = { 
          x: 150,
          y: 150,
          vx: 2,
          vy: 2
        }
        this.x = -100
    
        // 通过 SelectorQuery 获取 Canvas 节点
        wx.createSelectorQuery()
          .select('#canvas')
          .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 = wx.getSystemInfoSync().pixelRatio
        canvas.width = width * dpr
        canvas.height = height * dpr
        ctx.scale(dpr, dpr)
    
        const renderLoop = () => { 
          this.render(canvas, ctx)
          canvas.requestAnimationFrame(renderLoop)
        }
        canvas.requestAnimationFrame(renderLoop)
    
        const img = canvas.createImage()
        img.onload = () => { 
          this._img = img
        }
        img.src = './car.png'
      },
    
      render(canvas, ctx) { 
        ctx.clearRect(0, 0, 300, 300)
        this.drawBall(ctx)
        this.drawCar(ctx)
      },
    
      drawBall(ctx) { 
        const p = this.position
        p.x += p.vx
        p.y += p.vy
        if (p.x >= 300) { 
          p.vx = -2
        }
        if (p.x <= 7) { 
          p.vx = 2
        }
        if (p.y >= 300) { 
          p.vy = -2
        }
        if (p.y <= 7) { 
          p.vy = 2
        }
    
        function ball(x, y) { 
          ctx.beginPath()
          ctx.arc(x, y, 5, 0, Math.PI * 2)
          ctx.fillStyle = '#1aad19'
          ctx.strokeStyle = 'rgba(1,1,1,0)'
          ctx.fill()
          ctx.stroke()
        }
    
        ball(p.x, 150)
        ball(150, p.y)
        ball(300 - p.x, 150)
        ball(150, 300 - p.y)
        ball(p.x, p.y)
        ball(300 - p.x, 300 - p.y)
        ball(p.x, 300 - p.y)
        ball(300 - p.x, p.y)
      },
    
      drawCar(ctx) { 
        if (!this._img) return
        if (this.x > 350) { 
          this.x = -100
        }
        ctx.drawImage(this._img, this.x++, 150 - 25, 100, 50)
        ctx.restore()
      }
    })

运行效果：

![在这里插入图片描述][20210619153500214.gif]

**WebGL 示例代码**

[在开发者工具中预览效果][Link 4]

<canvas type="webgl" id="myCanvas"></canvas>

// canvas.js
    Page({ 
      onReady() { 
        const query = wx.createSelectorQuery()
        query.select('#myCanvas').node().exec((res) => { 
          const canvas = res[0].node
          const gl = canvas.getContext('webgl')
          gl.clearColor(1, 0, 1, 1)
          gl.clear(gl.COLOR_BUFFER_BIT)
        })
      }
    })

**示例代码（旧的接口）**

[在开发者工具中预览效果][Link 5] [下载][Link 6]

<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas"></canvas>
    
    <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas"></canvas>
    
    <canvas style="width: 400px; height: 500px;" canvas-id="secondCanvas" binderror="canvasIdErrorCallback"></canvas>
    Page({
      canvasIdErrorCallback: function (e) {
        console.error(e.detail.errMsg)
      },
      onReady: function (e) {
        // 使用 wx.createContext 获取绘图上下文 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()
      }
    })

> 微信搜一搜【java1234】关注这个放荡不羁的程序员，关注后回复【资料】有我准备的一线大厂笔试面试资料以及简历模板。

[Java_]: https://blog.csdn.net/caoli201314/article/details/116643190
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E5%90%8C%E5%B1%82%E6%B8%B2%E6%9F%93
[canvas]: https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html#%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E7%9A%84%E4%BD%BF%E7%94%A8%E9%99%90%E5%88%B6
[Link 3]: https://developers.weixin.qq.com/s/SHfgCmmq7UcM
[20210619153500214.gif]: /images/20210901/458a4e42857c4ef5894dfd6708de9336.png
[Link 4]: https://developers.weixin.qq.com/s/qEGUOqmf7T8z
[Link 5]: https://developers.weixin.qq.com/s/oyVplmmG6xYt
[Link 6]: https://developers.weixin.qq.com/miniprogram/dev/component/require%28'%20rel=