Nincompoops Producing Methane

    @uni/canvas
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.8 • Public • Published

    createContext

    npm

    获取 canvas 绘图上下文

    支持

    browser miniApp wechatMiniprogram bytedanceMicroApp baiduSmartProgram kuaiShouMiniProgram

    安装

    $ npm install @uni/canvas --save

    参数

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

    不通用参数(由于破坏了一码多端的能力,不推荐使用)

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

    返回

    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';
    微信小程序

    Keywords

    none

    Install

    npm i @uni/canvas

    DownloadsWeekly Downloads

    42

    Version

    1.0.8

    License

    BSD-3-Clause

    Unpacked Size

    136 kB

    Total Files

    76

    Last publish

    Collaborators

    • bunko
    • rax-publisher