# @bizcharts/rax-canvas > Rax跨端canvas组件 Latest version **1.0.0** (published 2023-12-06) · MIT license · 0 weekly downloads ## Install ```sh npm install @bizcharts/rax-canvas pnpm add @bizcharts/rax-canvas yarn add @bizcharts/rax-canvas bun add @bizcharts/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 | 1.0.0 | | Published | 2023-12-06 | | First published | 2021-03-22 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 807.1 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | hahaiwin, zuobin.zb, weepy3641, leannechen, xiaran, leslie2014, remygong, fengyue1, ssfxz, bugmaker | | Keywords | rax, rax-component, canvas | ## Links - npm: https://www.npmjs.com/package/@bizcharts/rax-canvas - Homepage: https://unpkg.com/@bizcharts/rax-canvas@1.0.0/build/index.html - npm.io page: https://npm.io/package/@bizcharts/rax-canvas ## Dependencies (9) - [rax-text](https://npm.io/package/rax-text.md) ^2.0.0 - [rax-view](https://npm.io/package/rax-view.md) ^2.0.4 - [classnames](https://npm.io/package/classnames.md) ^2.2.6 - [rax-canvas](https://npm.io/package/rax-canvas.md) ^2.2.1 - [universal-env](https://npm.io/package/universal-env.md) ^4.0.0-beta - [@antv/f2-context](https://npm.io/package/@antv/f2-context.md) ^0.0.1 - [universal-device](https://npm.io/package/universal-device.md) ^2.3.1 - [babel-runtime-jsx-plus](https://npm.io/package/babel-runtime-jsx-plus.md) ^0.1.5 - [babel-runtime-jsx-style-transform](https://npm.io/package/babel-runtime-jsx-style-transform.md) ^0.0.4 ## Alternatives - [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads - [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads - [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads - [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads - [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads ## Recent versions - 1.0.0 (latest) — 2023-12-06 - 0.3.7-beta.0 (beat) — 2022-02-25 - 0.3.2-beta.0 (beta) — 2021-03-22 - 0.3.7 — 2022-02-25 - 0.3.6 — 2022-02-24 - 0.3.6-beta.9 — 2022-02-24 - 0.3.6-beta.8 — 2022-02-24 - 0.3.6-beta.7 — 2022-02-20 - 0.3.6-beta.6 — 2022-02-15 - 0.3.6-beta.5 — 2021-12-08 - 0.3.6-beta.4 — 2021-11-18 - 0.3.6-beta.3 — 2021-11-15 - 0.3.6-beta.2 — 2021-11-09 - 0.3.6-beta.1 — 2021-10-28 - 0.3.5 — 2021-10-27 - … 6 more at https://npm.io/package/@bizcharts/rax-canvas/versions ## README ## @bizcharts/rax-canvas Rax跨端canvas组件，支持宽高自适应、H5与小程序绘图上下文获取，API与W3C标准一致。 目前支持运行时和编译时的阿里小程序，以及运行时的微信小程序。 ## Install ``` $ npm install @bizcharts/rax-canvas --save ``` ## Usage ``` import RaxExample from '@bizcharts/rax-canvas'; ``` ## API ### Props | name | type | default | describe | | :------------ | :--------------------------------------------------------------------------------------------------- | :------ | :----------------- | | prefix | string; | bx-rax | 画布ID前缀 | | autoFit | boolean; | true | 自适应宽高 | | width | number; | / | 画布宽度 | | height | number; | / | 画布高度 | | pixelRatio | number; | 2 | 清晰度 | | hasBackCanvas | boolean; | false | 是否需要离屏canvas | | style | ICanvasInfo; | / | CSS样式 | | events | { onTouchStart: any; onTouchMove: any; onTouchEnd: any; onTouchCancel: any; onLongPress: any; } | / | 事件(不推荐使用) | | onTouchStart | e=>void | / | 触摸开始事件 | | onTouchMove | e=>void | / | 触摸移动事件 | | onTouchEnd | e=>void | / | 触摸结束事件 | | onTouchCancel | e=>void | / | 触摸取消事件 | | onLongPress | e=>void | / | 长触事件 | #### ICanvasInfo | name | type | default | describe | | :---------- | :------------------------ | :------ | :------------- | | context | CanvasRenderingContext2D; | / | 绘图上下文 | | backContext | CanvasRenderingContext2D; | / | 离屏绘图上下文 | | width | number; | / | 画布宽度 | | height | number; | / | 画布高度 | | pixelRatio | number; | 2 | 清晰度 | ### Function | name | param | return | describe | | :-------------- | :--------- | :----- | :------- | | onGetCanvasInfo | info=>void | / | describe | ## Example ![example](https://img.alicdn.com/tfs/TB1zmm6sqNj0u4jSZFyXXXgMVXa-363-209.gif) ``` import { createElement, render } from 'rax'; import DriverUniversal from 'driver-universal'; import Canvas from '@bizcharts/rax-canvas'; function App() { let req; const handleDraw = (info) => { const { context: ctx, width, height } = info; var ball = { x: 100, y: 100, vx: 5, vy: 2, radius: 25, color: 'blue', draw: function () { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); if (ctx.draw) { ctx.draw(); } }, }; function draw() { ctx.clearRect(0, 0, width, height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; if (ball.y + ball.vy > height - ball.radius || ball.y + ball.vy < ball.radius) { ball.vy = -ball.vy; } if (ball.x + ball.vx > width - ball.radius || ball.x + ball.vx < ball.radius) { ball.vx = -ball.vx; } req = requestAnimationFrame(draw); } req = requestAnimationFrame(draw); }; useEffect(() => { return () => { cancelAnimationFrame(req); }; }, []); return ; } render(, document.body, { driver: DriverUniversal }); ``` --- _Source: https://npm.io/package/@bizcharts/rax-canvas · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._