@uni/canvas

createContext

获取 canvas 绘图上下文

支持

安装

$ 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';

微信小程序