createContext

下载文件资源到本地。

支持

安装

$ npm install @uni/canvas --save

参数

| 属性 | 类型 | 默认值 | 必选 | 描述 | | ------ | -------- | ------ | ---- | ---------------- | | canvasId | String | | √ | 定义在 canvas 上的 ID | | type | 2d/webgl/webgl2 | 2d | x | 画布上下文类型 |

不通用参数（由于破坏了一码多端的能力，不推荐使用）

| 属性 | 类型 | 默认值 | 必选 | 描述 | 支持 | | ------ | -------- | ------ | ---- | ----- | ------- | | options | object | | x | 上下文属性 | |

返回

CanvasRenderingContext

通过 createContext({ canvasId: 'canvas', type: '2d' }) 接口可以获取 CanvasRenderingContext2D 对象，实现了 HTML Canvas 2D Context 定义的属性、方法。 通过 createContext({ canvasId: 'canvas', type: 'webgl' }) 或 OffscreenCanvas.getContext('webgl') 接口可以获取 WebGLRenderingContext 对象，实现了 WebGL 1.0 定义的所有属性、方法、常量。

使用

import { createElement, useEffect } from 'rax';
import View from 'rax-view';
import { createContext } from '@uni/canvas';

export default function() {
  useEffect(() => {
    createContext({
      canvasId: 'canvas'
    }).then((canvasContext) => {
      canvasContext.fillStyle = 'red';
      canvasContext.fillRect(0, 0, 100, 100);
    });
  }, []);
  return (
    <View>
      <canvas id="canvas" type="2d" width="400" height="400" />
    </View>
  );
}

注意：在微信小程序的自定义组件中使用的时候，都需要传递 context 属性来指定自定义组件实例： （context 在rax中如下示例中获取，在原生小程序中直接使用 this）; 百度小程序使用canvas组件时需要传入canvas-id属性 <canvas canvas-id="canvas" />

import { createElement, useEffect } from 'rax';
import View from 'rax-view';
import { createContext } from '@uni/canvas';

export default function() {
  useEffect(() => {
    const node = document.querySelector('#demo1');
    createContext({
      canvasId: 'canvas',
      context: node._internal
    }).then((canvasContext) => {
      canvasContext.fillStyle = 'red';
      canvasContext.fillRect(0, 0, 100, 100);
    });
  }, []);
  return (
    <View>
      <canvas id="canvas" type="2d" width="400" height="400" />
    </View>
  );
}

你也可以从大包引入：

import { canvas } from '@uni/apis';