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

相关推荐
刘发财3 小时前
弃用html2pdf.js,这个html转pdf方案能力是它的几十倍
前端·javascript·github
ssshooter10 小时前
看完就懂 useSyncExternalStore
前端·javascript·react.js
sunny86511 小时前
Claude Code 跨会话上下文恢复:从 8 次纠正到 0 次的工程实践
人工智能·开源·github
Live0000011 小时前
在鸿蒙中使用 Repeat 渲染嵌套列表,修改内层列表的一个元素,页面不会更新
前端·javascript·react native
柳杉11 小时前
使用Ai从零开发智慧水利态势感知大屏(开源)
前端·javascript·数据可视化
球球pick小樱花12 小时前
游戏官网前端工具库:海内外案例解析
前端·javascript·css
喝水的长颈鹿12 小时前
【大白话前端 02】网页从解析到绘制的全流程
前端·javascript
用户145369814587812 小时前
VersionCheck.js - 让前端版本更新变得简单优雅
前端·javascript
codingWhat12 小时前
整理「祖传」代码,就是在开发脚手架?
前端·javascript·node.js
码路飞12 小时前
写了个 AI 聊天页面,被 5 种流式格式折腾了一整天 😭
javascript·python