canvas

基础库 3.18.0 开始支持，低版本需做兼容处理。

画布。3.58.0 起支持一套新 Canvas 2D 接口（需指定 type 属性）。相关api：获取 canvas 实例。

属性

Bug & Tip

1. tip：canvas 标签默认宽度300px、高度150px
2. tip：同一页面中的 canvas-id 不可重复，如果使用一个已经出现过的 canvas-id，该 canvas 标签对应的画布将不再正常工作
3. tip：请注意原生组件使用限制
4. tip：resize 事件的触发可能会由于使用特殊样式单位（百分比、vw、vh等）引起的横竖屏变化触发。
5. Canvas 2期方案（ 3.58.0 ）需要显式设置画布宽高，如不设置默认使用 canvas 组件样式大小，如样式也不设置则默认：300*150。
6. Canvas 2期方案（ 3.58.0 ）设置画布的 width 和 height，没有 getContext 前设置是不会触发 resize 事件的。
7. Canvas 2期方案（ 3.58.0 ）双端差异，通过设置组件样式变化，安卓可以缩放画布，IOS无法缩放，会清空画布。
8. Canvas 2期方案（ 3.58.0 ）安卓有一定几率下载不了远端能力包，需要用户在安卓下考虑降级方案。
   • 提供API判断：bl.isCanvasSupportedSync()
   • canvas error 事件中会返回错误信息

方案说明

3.18.0 1期方案

获取 canvas：bl.createCanvasContext

3.58.0 2期方案

获取 canvas：RenderingContext

Canvas 2D 示例代码

<template>
  <b-canvas type="2d" id="myCanvas"></b-canvas>
</template>

<script>
export default {
  onReady() {
    bl.createSelectorQuery()
        .select("#myCanvas")
        .fields({
          node: true,
          size: true,
        })
        .exec((res) => {
          // 如果是降级或不支持的版本，node 是 null，需要在此判断。
          if (res[0].node) {
            const canvas = res[0].node;
            const ctx = canvas.getContext("2d");
            const dpr = bl.getSystemInfoSync().pixelRatio;
            canvas.width = res[0].width * dpr;
            canvas.height = res[0].height * dpr;
            ctx.scale(dpr, dpr);
            ctx.fillRect(0, 0, 100, 100);
          }
        });
  },
};
</script>

<style lang="less" scoped></style>

WebGL 示例代码

<template>
  <b-canvas type="webgl" id="myCanvas"></b-canvas>
</template>

<script>
export default {
  onReady() {
    bl.createSelectorQuery()
        .select("#myCanvas")
        .fields({
          node: true,
          size: true,
        })
        .exec((res) => {
          // 如果是降级或不支持的版本，node 是 null，需要在此判断。
          if (res[0].node) {
            const canvas = res[0].node;
            const gl = canvas.getContext('webgl')
            gl.clearColor(1, 0, 1, 1)
            gl.clear(gl.COLOR_BUFFER_BIT)
          }
        });
  },
};
</script>

<style lang="less" scoped></style>

示例代码（旧的接口）

<template>
  <b-canvas canvas-id="myCanvas"></b-canvas>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {},
  onReady(){
    let _ctx = bl.createCanvasContext('myCanvas');
    _ctx.beginPath();
    _ctx.moveTo(20,20);
    _ctx.quadraticCurveTo(20,100,200,20);
    _ctx.stroke();
    _ctx.draw();
  }
}
</script>

<style lang="less" scoped></style>

error 信息