我正在写一份无限画布教程

[xiaoiver]

你一定见过甚至使用过各种包含无限画布的应用，infinitecanvas 上就展示了从设计工具到创意画板在内的众多案例，其中不乏一些知名产品包括 Figma 、Modyfi 、Motiff 、rnote 、tldraw 、excalidraw 等等。

作为一个前端，我对其中涉及到的渲染技术很感兴趣。尽管 tldraw 、excalidraw 等普遍使用易用性更高的 Canvas2D / SVG 技术，但 JS 和 Rust 生态中也有很多编辑器、设计工具使用更底层的渲染技术对 2D 图形进行 GPU 加速，以获得更好的性能和体验。

因此在这个教程中，我希望实现以下特性：

• 使用支持 WebGL1/2 和 WebGPU 的硬件抽象层。
• 使用 SDF 渲染圆、椭圆、矩形等。
• GPU 加速的文本和贝塞尔曲线渲染。
• 使用 rough.js 支持手绘风格。
• 使用 CRDT 支持协同 Yjs 。

目前已经写了十多章了，希望得到更多关注！

项目地址： https://github.com/xiaoiver/infinite-canvas-tutorial

[chingli]

这个也太强了，现代计算机绘图技术之集大成，一定认真学习。

[shilianmlxg]

tql 正好现在在学可视化拖拽

[xiaoiver]

@chingli 谢谢支持，但也没这么夸张😊。借鉴了非常多已有的实践，在过程中我也在学习，也是想做这个教程的初衷。

[Rrrrrr]

先 收藏 再看

[kenberkeley]

请收下我的膝盖。

[rekulas]

写图形的都是大佬

[enchilada2020]

大佬🐮🍺 已 star 不过好像有点太硬核了 在线求一份 Canvas/SVG 制作画布的教程…

[SayHelloHi]

在线求一份 Canvas/SVG 制作画布的教程 +1

[sakura0508]

🐮🍺 先 start 再看

[Hanser002]

太赞了！最近正好在研究 webGPU

[boyzhang]

很强啊，收藏了，有空就学习下

[Daru]

太強了，正好需要這個，收藏了

[Chiqing]

想问问佬，这种教程网站是有模板的吗，感觉看过几次类似风格的

[sankemao]

之前写画布应用的时候参考过

[xiaoiver]

@Chiqing 这个用的是 VitePress 生成的，默认主题

[maoxianCk]

强，支持大佬

[terito11122]

太强了 学习下

[zhangchaojie]

强，star 了

[shui14]

可以直接放弃 webgl2 。除非锚定 web ，直接 dawn 开发向下兼容到 js 应该更有空间
跨平台，按照现在 llm 的趋势，很快就会有全能 app 出现，imgui 迎来第二波春天，我压宝它
类似的 zed 那个团队的 gpui ，长桥的开发谈到过不过他们是桌面。还有一个香港的团队搞光追也挺有特色