rax-canvas
支持
Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序
描述
画布组件.
安装
$ npm install rax-canvas --save
属性
方法
getContext(type: string)
返回画布实例。
type 默认值为 2d
,目前在小程序中暂不支持设置。
由于微信小程序新接口获取 canvas context
是一个异步行为,如果想获得设置 2d
/webgl
的能力,则不能使用 getContext
方法,需要用户自己兼容处理,具体详见微信小程序文档 https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html。
注意
直接指定 width
或者 height
的优先级高于在 style
和 className
中指定的宽高。
示例
import { createElement, Component, render, createRef } from 'rax';
import Canvas from 'rax-canvas';
import DriverUniversal 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: DriverUniversal });