# @aphrody/canvas 中文文档

规范地址：https://npmcn.com/package/%40aphrody/canvas/

版本：1\.4\.7
npm 元数据更新时间：2026-10-23T09:28:19.458Z
中文译文更新时间：2026-11-06T22:45:02.841Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40aphrody/canvas
原文对照：https://npmcn.com/package/%40aphrody/canvas/?lang=original
源码仓库：https://github.com/aphrody-labs/aphrody-m3

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：108 kB，15 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@aphrody/bun ^3\.3\.0
- 首次发布：2026-06-03T23:01:38.403Z
- 最新版本发布：2026-10-23T09:28:19.254Z
- 近 30 天下载量：2222（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：7（近 12 个月 7 个）

## 中文简介

@napi-rs/canvas 运行时间

## 安装

```sh
npm install @aphrody/canvas
```

也可以使用：`pnpm add @aphrody/canvas`、`yarn add @aphrody/canvas`、`bun add @aphrody/canvas`

## README

# @aphrody/ canvas (英语)

Apprody的帆布包:一个马厩 `@aphrody/*` 位于被钉住的上游 Skia 上的命名空间 运行时间 [`@napi-rs/canvas`](https://github.com/Brooooooklyn/canvas) (1.0.9,实施 `8411071`, (中文(简体) ), 加上M3包、SpaceUI、Tauri和制成箱所使用的M3表面合同. 进口消费者 `@aphrody/canvas` 从不依赖 `@napi-rs/canvas` 直接说.

```sh
bun add @aphrody/canvas   # Bun >= 1.4.2
```

## 入境点

| 导入 | 原生添加剂 | 目录 |
| --- | --- | --- |
| `@aphrody/canvas` | 导入时装入 | 上游API(`createCanvas`, (中文(简体) ), `loadImage`, (中文(简体) ), `Image`, (中文(简体) ), `GlobalFonts`, (中文(简体) ), `Path2D`, (中文(简体) ), `SKRSContext2D`,(......), `loadNativeCanvas()`, (中文(简体) ), `createNativeCanvas()`, (中文(简体) ), `loadNativeImage()`, (中文(简体) ), `drawM3Scene()`, (中文(简体) ), `drawM3Scene3d()` 和现场合同. |
| `@aphrody/canvas/site` | 永远 | `createM3CanvasSurface()`, (中文(简体) ), `createBrowserCanvas()`, (中文(简体) ), `configureBrowserCanvas()`, (中文(简体) ), `selectCanvasBackend()`。 。 。 . |
| `@aphrody/canvas/browser` | 永远 | 模块与 `/site`。 。 。 . |

```ts
import { createCanvas, GlobalFonts, type SKRSContext2D } from "@aphrody/canvas";

const canvas = createCanvas(320, 120);
const ctx: SKRSContext2D = canvas.getContext("2d");
ctx.fillRect(0, 0, 320, 120);
const png = await canvas.encode("png"); // also "webp", "avif", "jpeg"
```

`aphrody-site` 和浏览器捆绑必须使用本地自由的入口,因此Skia addon永远不会 到达站点捆绑 :

```ts
import {
  createBrowserCanvas,
  createM3CanvasSurface,
} from "@aphrody/canvas/site";
```

包件船 TypeScript 源为 Bun (`"default"` 和手写 声明`"types"` anext.js 的消费者 `/site` 在 `transpilePackages`。 。 。 .

## 原生 Skia 二进制

附加由上游装载机解决(`vendor/js-binding.js`),第一场比赛获胜:

1.  `NAPI_RS_NATIVE_LIBRARY_PATH`: 到 a 的绝对路径 `skia.<platform>.node`,例如,一个 由Apprody从 `third_party/canvas`当设定时,它是唯一的候选人.
2.  `vendor/skia.<platform>.node` 在装载器旁边(被基特所忽略,从未犯过).
3.  上游预建软件包 `@napi-rs/canvas-<platform>@1.0.9`,在 `optionalDependencies`软件包管理器跳过 `os`编号 :`cpu` 不符合 主机( 装入器在 Linux 上取出) `gnu` 或者说 `musl` 运行时间 : `win32-x64-msvc`, (中文(简体) ), `win32-arm64-msvc`, (中文(简体) ), `linux-x64-gnu`, (中文(简体) ), `linux-x64-musl`, (中文(简体) ), `linux-arm64-gnu`, (中文(简体) ), `linux-arm64-musl`, (中文(简体) ), `linux-arm-gnueabihf`, (中文(简体) ), `linux-riscv64-gnu`, (中文(简体) ), `darwin-x64`, (中文(简体) ), `darwin-arm64`, (中文(简体) ), `android-arm64`。 。 。 .

`optionalDependencies` 从 `third_party/canvas/npm/*` 在销售版本,所以 javaScript 加载器和二进制总是来自相同的上游放出.

## M3场景

`drawM3Scene()` 财务报告和审定财务报表 `drawM3Scene3d()` 将 Rust 的 M3 场景光化(`aphrody_render`,通过 `@aphrody/bun`)并用土生土长的塞通给巴布亚新几内亚人抹黑. `@aphrody/bun` 是可选对等点 依赖性:仅在这两个函数之一运行时导入,并缺失安装 掷出 `@aphrody/canvas: drawM3Scene needs the optional peer dependency @aphrody/bun`。场景 类型(`M3Scene`, (中文(简体) ), `M3Scene3d`, (中文(简体) ), `M3Render3dPolicy`)来自 `scene-types.d.ts`,副本 `packages/bun/src/scene-types.ts`,所以类型检查从不需要 `@aphrody/bun`。 。 。 .

## 版式和上游

`third_party/canvas` 是一个位于非叉子上游的Git子模块,从未设置; 假面或拉斯特的货箱里都有类似的行为 软件包需要的文件 从其他树上取出副本 :

| 路径 | 来源 |
| --- | --- |
| `vendor/index.js`, (中文(简体) ), `js-binding.js`, (中文(简体) ), `geometry.js`, (中文(简体) ), `load-image.js`, (中文(简体) ), `index.d.ts`, (中文(简体) ), `LICENSE` | `third_party/canvas` (MIT,上游版权通知保存) |
| `vendor/package.json` | `{"type": "commonjs"}`:上游加载器为普通JS,此包为无害环境管理 |
| `vendor/UPSTREAM.md` | 证明:每份文件的提交、版本、执照、SHA-256 |
| `scene-types.d.ts` | `packages/bun/src/scene-types.ts` |

复制品是按装包时间录制的:

-   `bun test`,类型检查和每个工作空间 消费者从一个简单的检查,没有 建立阶梯,而不初始化子模块;
-   公布的柏油球正是被审查的树(`files` 列出每个已运出路径;
-   漂移仍然无法发表: `scripts/vendor-upstream.ts --check` 运行为 `prepack` (如果子模块缺失则失败),以及 `vendor.test.ts` 将每份副本与来源进行比较 当子模块被检查出来时,并使用SHA-256英寸 `vendor/UPSTREAM.md` 否则.

副本在连接LF的线下正常化后为同名字节.

### 上游更新

```sh
git -C third_party/canvas fetch && git -C third_party/canvas checkout <reviewed-sha>
cd packages/canvas
bun run vendor            # rewrites vendor/, scene-types.d.ts and optionalDependencies
# keep aphrodyCanvasVersion in site.ts, site.d.ts and index.d.ts equal to the
# package version (the release-aligned Aphrody version), then run the gates below
```

## 验证

```sh
cd packages/canvas
bun test                  # contract, native encode (PNG/WebP/AVIF), vendor drift, manifest
bun run typecheck         # sources, then published declarations with skipLibCheck: false
bun run lint && bun run format:check
bun run vendor:check
bun pm pack --destination <dir>
```

林特和格式检查使用 Bun 的本地 `bun lint` 财务报告和审定财务报表 `bun fmt` 命令 直接,无 `bunx`,独立的Oxc工具,或子进程后端.

## 出版

`.github/workflows/release-m3-packages.yml` 发布此软件包之前 `@aphrody/material-web` (这取决于它) 当一个 `m3-v*` 标记被推出 。 名单存有 没有 `workspace:` 或者说 `catalog:` 说明,所以包装 `package.json` 是登记 `package.json`由所有者操作的手动等同器:

```sh
cd packages/canvas && bun publish --access public --tag latest --registry https://registry.npmjs.org
```

## 常见问题

### @aphrody/canvas 是什么？

@napi-rs/canvas 运行时间

### 如何安装 @aphrody/canvas？

在项目目录运行 npm install @aphrody/canvas，或使用 pnpm add / yarn add / bun add。

### @aphrody/canvas 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @aphrody/canvas 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @aphrody/canvas 可以商用吗？

@aphrody/canvas 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @aphrody/canvas 的下载量有多少？

根据 npm 官方下载统计，@aphrody/canvas 在 2026/10/06 – 2026/11/04 这 30 天内被下载 2,222 次，日均约 74 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @aphrody/canvas 还在维护吗？

最新版本 1\.4\.7 发布于 2026/10/23（15 天前）；至今共发布 7 个版本，其中过去 12 个月发布了 7 个；首次发布于 2026/06/04。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。