# @clayzo/canvaskit-player 中文文档

规范地址：https://npmcn.com/package/%40clayzo/canvaskit-player/

版本：0\.3\.21
npm 元数据更新时间：2026-11-04T22:09:13.494Z
中文译文更新时间：2026-11-10T00:39:16.526Z
软件包许可：SEE LICENSE IN LICENSE\.md

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

原始 npm 页面：https://www.npmjs.com/package/%40clayzo/canvaskit-player
原文对照：https://npmcn.com/package/%40clayzo/canvaskit-player/?lang=original

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

- 包体积（解压后）：207 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22\.13
- 运行依赖：3 个
- peer 依赖：react \>=18\.3 \<20
- 首次发布：2026-08-25T00:44:52.439Z
- 最新版本发布：2026-11-04T22:09:13.294Z
- 近 30 天下载量：4592（2026-10-10 至 2026-11-08，npm 官方下载统计）
- 已发布版本数：21（近 12 个月 21 个）

## 中文简介

全信克蕾佐动画选手. CanvasKit/Skia,画出引擎能够表达的一切.

## 安装

```sh
npm install @clayzo/canvaskit-player
```

也可以使用：`pnpm add @clayzo/canvaskit-player`、`yarn add @clayzo/canvaskit-player`、`bun add @clayzo/canvaskit-player`

## README

# @clayzo/canvaskit-player(英语:canvaskit-player) 互联网电影数据库(imdb)上"canvaskit"的资料(英文)

完全忠诚的克莱佐玩家. CanvasKit — Skia 编译为 WASM, 相同 构建视频导出运行——从而绘制出引擎能表达出的一切.

```bash
npm i @clayzo/canvaskit-player
```

```ts
import { createPlayer } from '@clayzo/canvaskit-player';

const player = await createPlayer({ canvas, document });
player.play();
```

同调用 `@clayzo/webgl-player`,所以互换是导入中的一个词.

React and Next 客户端可以使用可选客户端的切入点 :

```tsx
import { ClayzoPlayer } from '@clayzo/canvaskit-player/react';

export function Hero() {
  return <ClayzoPlayer document={document} poster="/hero.poster.webp" posterTick={240} label="A cube folding into the logo" />;
}
```

也一样 `poster`, (中文(简体) ), `posterTick`, (中文(简体) ), `autoplay`, (中文(简体) ), `reducedMotion`, (中文(简体) ), `label`, (中文(简体) ), `decorative` 财务报告和审定财务报表 `fallback` 道具为 `@clayzo/webgl-player/react`,并仅在玩家靠近取景口时加载.

**~ 2,535 KB Brotli (韩语)**大部分是斯基亚 如果这是负担得起的,这是 要达到的渲染器:通过构造和观众所看到的是正确的 无法从出口产品中漂移,因为它们是相同的代码.

## 斯基亚从哪里来

与发光器不同,8 MB 二进制不能被烤入捆- base64 将是 JavaScript 的 10 MB 在第一个框架之前进行剖析 。 没错 相反, 默认从一个版本锁定的 CDN 获取 :

```
https://unpkg.com/canvaskit-wasm@0.42.0/bin/full
```

刻意用一个准确的版本。 这个渲染器是写在上面的 建筑的行为,一个CDN 悄悄地为新斯基亚服务 是一种忠诚的改变 没有人要求.

自我主机——在防火墙后,在严格的CSP下,或者干脆不想要 在关键道路上依赖第三方:

```bash
npm i -D canvaskit-wasm@0.42.0
cp node_modules/canvaskit-wasm/bin/full/canvaskit.{js,wasm} public/canvaskit/
```

```ts
await createPlayer({ canvas, document, canvasKitUrl: '/canvaskit' });
```

需要两个文件 _满_ 具体建造:只提供斯科特船 那边 还有Lottie节点的文件需要它.

## 字体

```ts
await createPlayer({
  canvas,
  document,
  onPrewarm: (result) => {
    if (result.unresolvedFamilies.length > 0) {
      console.warn('no font for:', result.unresolvedFamilies.join(', '));
    }
  },
});
```

值得连接。 无法装入器提供的字体不会丢出也不会丢出 替代——案文完全不依靠它. `onPrewarm` 实值 在开发中捕捉到的区别 和运输的空白 头条.

## 在两个造物器之间进行选择

见 `@clayzo/animation`是因为 `docs/renderers.md`。用这个当您 无法提前列出文档——设计工具、编辑器预览、 由用户撰写的作品画廊——或何时 `@clayzo/webgl-player`是因为 `checkCoverage` 说 文档需要它.

## 常见问题

### @clayzo/canvaskit-player 是什么？

全信克蕾佐动画选手\. CanvasKit/Skia,画出引擎能够表达的一切\.

### 如何安装 @clayzo/canvaskit-player？

在项目目录运行 npm install @clayzo/canvaskit-player，或使用 pnpm add / yarn add / bun add。

### @clayzo/canvaskit-player 支持 TypeScript 吗？

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

### @clayzo/canvaskit-player 支持 ESM 还是 CommonJS？

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

### @clayzo/canvaskit-player 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22\.13。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @clayzo/canvaskit-player 可以商用吗？

@clayzo/canvaskit-player 使用 SEE LICENSE IN LICENSE\.md 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @clayzo/canvaskit-player 的下载量有多少？

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

### @clayzo/canvaskit-player 还在维护吗？

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