认识一下 canvaskit.js

Skia 和 canvaskit.js 关系

根据现有的信息, Chrome 在实现 canvas 的绘制指令时, 底层使用的是 Skia 引擎绘制. 当然了, 还包括 Flutter, Chrome OS 也使用了 Skia. 下面是 Skia 管方的介绍:

CanvasKit 是基于 Skia 图形库的 js 版本,它使用 WebAssembly (WASM) 技术将 Skia 的图形 API 导出到 Web 平台.

API

既然 canvaskit 是 Skia 的 js 版本, 那么在使用上他们应该又很多相似性. 不过 canvaskit 本身似乎没有独立的 API 页面, 只有 Skia 有. 但是, Skia 和 canvaskit 的 API 并不是一致的, 整体架构一样,但是大部分 API 命名是不一样的.

这是由于 canvaskit.js 是在 Emscripten 编译结果的另一层封装, 因此他们不一样.

下面信息来自 github.com/google/skia...

可以看到 Emscripten 对 SkPath 在binding 时并没改名字.

但是在封装到 Canvaskit 对象的时候改了名字. 直接挂载到 Canvaskit.Path 下了.

所以在使用 canvaskit 时, 目前看最好的办法是在 Google 的 Skia 仓库中搜索来判断是否存在相关 API .

一个 CanvasKit demo: 文字排版路径

本想通过 canvaskit 来获取文字字形, 也就是 glyph 的路径. 发现一个 API 叫做 MakeOnPath, 但是实际上是另一种效果, 这个 API 是将文字沿着确定的路径排版. 暂时还不知道如何得到 glyph path.

如果有一个路径是圆形, 那么文字就按照原型排版. 最终效果如下

Github 链接

相关推荐
37手游后端团队13 小时前
gorm回读机制溯源
后端·面试·github
CC码码14 小时前
不修改DOM的高亮黑科技,你可能还不知道
前端·javascript·面试
虚诚14 小时前
vue2中树形表格怎么实现
前端·javascript·vue.js·ecmascript·vue2·树形结构
散峰而望14 小时前
【算法竞赛】栈和 stack
开发语言·数据结构·c++·算法·leetcode·github·推荐算法
哈__15 小时前
React Native 鸿蒙跨平台开发:下拉刷新功能
javascript·react native·react.js
猫头虎15 小时前
2026最新|GitHub 启用双因素身份验证 2FA 教程:TOTP.app 一键生成动态验证码(新手小白图文实操)
git·开源·gitlab·github·开源软件·开源协议·gitcode
没有鸡汤吃不下饭15 小时前
前端打包出一个项目(文件夹),怎么本地快速启一个服务运行
前端·javascript