认识一下 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 链接

相关推荐
刘较瘦_16 分钟前
AI 开发中的 Git Submodule 父子仓库模式:前后端分仓管理与协作实践
前端·github
gis开发之家1 小时前
《Vue3 从入门到大神35篇》Vue3 源码详解(五):effect 依赖收集原理——track 与 trigger 是如何工作的?
javascript·typescript·前端框架·vue3·vue3源码
橘子星2 小时前
我一个前端切图仔,凭什么能在浏览器里跑大模型?
前端·javascript·前端框架
半个落月2 小时前
用 LangChain JS 做可控写作实验:理解温度参数、提示词与异步调用
javascript·人工智能·后端
观远数据2 小时前
Excel到数据资产池:文件数据入湖的治理规范怎么建
前端·javascript·excel
CoderWeen2 小时前
我写了个能一步步点着看的 Dijkstra 可视化项目(Vue3 + Leaflet + Generator)
前端·javascript·vue.js
DeMinds3 小时前
内容没有丢,我为什么总在重新整理?|DeMinds 如何让工作接着继续
ios·github·markdown
寒水馨3 小时前
macOS下载、安装openclaw-v2026.7.1(附安装包OpenClaw-2026.7.1.dmg)
macos·大模型·github·开源软件·ai助手·openclaw·gpt-5.6
爱分享的程序猿-Clark3 小时前
【前端分享】vue开发项目,如何实现 从A页面跳转到B页面,并传值!
前端·javascript·vue.js