# rax-canvas
> Canvas for Rax.
Latest version **2.2.2** (published 2021-01-28) · 0 weekly downloads
## Install
```sh
npm install rax-canvas
pnpm add rax-canvas
yarn add rax-canvas
bun add rax-canvas
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 2.2.2 |
| Published | 2021-01-28 |
| First published | 2017-04-24 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 44.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | rax |
| Maintainers | zeroling, wintercn, yuanyan, recover758126, rax-publisher |
| Keywords | Rax, rax-component |
## Links
- npm: https://www.npmjs.com/package/rax-canvas
- Homepage: https://github.com/raxjs/rax-components#readme
- Issues: https://github.com/raxjs/rax-components/issues
- npm.io page: https://npm.io/package/rax-canvas
## Dependencies (3)
- [@gcanvas/core](https://npm.io/package/@gcanvas/core.md) ^1.0.0
- [universal-env](https://npm.io/package/universal-env.md) ^3.0.0
- [rax-find-dom-node](https://npm.io/package/rax-find-dom-node.md) ^1.0.0
## Recent versions
- 2.2.2 (latest) — 2021-01-28
- 2.2.1-0 (beta) — 2020-09-11
- 1.0.1-beta.2 (next) — 2019-09-01
- 2.2.1 — 2020-09-14
- 2.2.0 — 2020-05-25
- 2.1.1 — 2020-03-31
- 2.1.0 — 2020-03-19
- 2.0.0 — 2019-12-16
- 1.1.0-0 — 2019-09-06
- 1.0.1-beta.1 — 2019-08-30
- 1.0.0 — 2019-07-30
- 1.0.0-beta.3 — 2019-07-29
- 1.0.0-beta.2 — 2019-07-29
- 1.0.0-beta.1 — 2019-07-09
- 1.0.0-beta.0 — 2019-06-27
- … 41 more at https://npm.io/package/rax-canvas/versions
## README
# rax-canvas
[](https://www.npmjs.com/package/rax-canvas)
## 支持
Web / Weex / 阿里小程序 / 微信小程序 / 字节跳动小程序
## 描述
画布组件.
- 在 Weex 上依赖 [gcanvas](https://github.com/weex-plugins/weex-plugin-gcanvas)
- 在支付宝小程序中依赖 [canvas](https://docs.alipay.com/mini/component/canvas)
## 安装
```bash
$ npm install rax-canvas --save
```
## 属性
|**属性**| **类型** | **默认值** | **必填** | **描述** | **支持** |
| ----------- | ---------- | ---------- | ------------ | ------------------ | ------------ |
| style | `object` | - | ✘ | 通过内联的方式设置画布样式 |
|
| className | `object` | - | ✘ | 设置画布的样式 | |
| width | `number` | 0 | ✘ | 设置画布的宽度 | |
| height | `number` | 0 | ✘ | 设置画布的高度 | |
| onClick | `function` | - | ✘ | 点击画布时触发的事件 | |
| onLongPress | `function` | - | ✘ | 长按画布时触发的事件 | |
| onTouchStart | `function` | - | ✘ | 触摸画布时触发的事件 | |
| onTouchMove | `function` | - | ✘ | 手指在画布上移动时触发的事件 | |
| onTouchEnd | `function` | - | ✘ | 结束触摸时触发的事件 | |
| onTouchCancel | `function` | - | ✘ | 触摸事件取消的时候触发的事件 | |
## 方法
### getContext(type: string)
返回画布实例。
type 默认值为 `2d`，目前在小程序中暂不支持设置。
由于微信小程序新接口获取 `canvas context` 是一个异步行为，如果想获得设置 `2d`/`webgl` 的能力，则不能使用 `getContext` 方法，需要用户自己兼容处理，具体详见微信小程序文档 https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html。
## 注意
直接指定 `width` 或者 `height` 的优先级高于在 `style` 和 `className` 中指定的宽高。
## 示例
```jsx
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 ;
}
}
render(, document.body, { driver: DriverUniversal });
```
---
_Source: https://npm.io/package/rax-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._