rax-canvas

描述： Rax canvas api.

在weex上依赖 gcanvas 在小程序中依赖 canvas 在weex和h5中需要通过ref获取canvas实例，在小程序中需要通过id获取

安装

$ npm install rax-canvas --save

引用

import Canvas from 'rax-canvas';

属性

注： 1、支持列表中的 代表h5 代表weex 代表小程序

属性	类型	默认值	必填	描述	支持
style	object	-	true	通过style中的width和height指定canvas的高、宽

方法

获取到canvas示例后，具备canvas的通用方法

示例

在线 Demo

import { createElement, Component, render, createRef } from 'rax';
import Canvas from 'rax-canvas';
import DU from "driver-universal"

class CanvasSample extends Component {
  constructor(props) {
    super(props);
    this.raxCanvasDemo = createRef()
  }
  componentDidMount() {
    const context = this.raxCanvasDemo.current.getContext();
    context.fillStyle = 'red';
    context.fillRect(0, 0, 100, 100);
  }

  render() {
    return <Canvas style={{
      width: 750,
      height: 750
    }} ref={this.raxCanvasDemo} />;
  }
}

render(<CanvasSample />, document.body, { driver: DU });