在线资源

文档

• https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
• https://html.spec.whatwg.org/multipage/canvas.html

教程

• https://www.w3schools.com/html/html5_canvas.asp
• https://css-tricks.com/tag/canvas/

文章

• https://www.freecodecamp.org/news/full-overview-of-the-html-canvas-6354216fba8d/

框架或库

• Konva.js:

  • 描述:  一个流行的 2D Canvas 框架，提供了面向对象的 API，支持图形、层、事件处理（点击、拖拽等）、滤镜、动画等，使得在 Canvas 上构建复杂的交互式应用更加容易。它模拟了一个“保留模式”的场景图。

  • 链接:  https://konvajs.org/

• Fabric.js:

  • 描述:  另一个强大的 Canvas 库，同样提供对象模型和丰富的交互功能。特别擅长创建 Canvas 编辑器和需要复杂对象操作的应用。支持 SVG 解析和导出。

  • 链接:  http://fabricjs.com/

• Paper.js:

  • 描述:  一个矢量图形脚本框架，虽然底层可以使用 Canvas 或 SVG，但在 Canvas 模式下提供了清晰的面向对象 API 和场景图，简化了绘图和交互。

  • 链接: http://paperjs.org/

• Two.js:

  • 描述:  一个面向现代 Web 的二维绘图 API，可以在多种上下文（SVG, Canvas, WebGL）中渲染。API 设计简洁。

  • 链接:  https://two.js.org/

• PixiJS:

  • 描述:  高性能的 2D 渲染引擎，优先使用 WebGL，但提供 Canvas 作为回退。特别适合游戏和需要高性能渲染的应用。API 友好。

  • 链接:  https://pixijs.com/

• Chart.js:

  • 描述:  流行的图表库，使用 Canvas 绘制各种交互式图表。是 Canvas 在数据可视化领域应用的典型代表。

  • 链接:  https://www.chartjs.org/

• p5.js:

  • 描述:  侧重于创意编码和艺术表达的 JavaScript 库，让艺术家、设计师、教育者和初学者能够轻松地进行图形、交互和动画编程，底层主要使用 Canvas。

  • 链接:  https://p5js.org/

游戏开发引擎

• Phaser:

  • 描述:  非常流行的 HTML5 游戏开发框架，支持 Canvas 和 WebGL 渲染，提供了丰富的游戏开发功能（物理引擎、精灵、动画、音频、输入管理等）。

  • 链接:  https://phaser.io

• Babylon.js / Three.js:

  • 描述:  虽然主要是 3D WebGL 库，但它们也可以用于 2D 场景，并且其渲染目标可以是 Canvas。有时用于需要混合 2D/3D 或追求极致性能的 2D 项目。它们与 Canvas 的关系更多在于 Canvas 是 WebGL 的载体。

  • Babylon.js:  https://www.babylonjs.com/

  • Three.js:  https://threejs.org/

开源 canvas 作品

• https://github.com/bxm0927/canvas-special