史上最全Canvas 2D开源项目
史上最全Canvas 2D开源项目
Canvas是HTML5标准的重要组成部分，由国际标准组织W3C于2014年发布。Canvas专门为图像处理而制定，它提供了一个强大、基于脚本的方式来绘制和处理Web图形，而不需任何外部插件。Canvas标签工作起来就像一块虚拟的画布，可以使用JavaScript来绘制线条、形状、文本和图像。这使得web开发人员能够基于Canvas创建复杂的动画、图表、游戏以及其他丰富的交互式图形应用，也可以使用Canvas来进行图片编辑和实时视频处理等。
SVG和Canvas是当前Web端图形处理的两大主流技术，有着各自的优势和适用场景。SVG图形应用开发相关的开源项目详见另一篇文章《史上最全SVG开源项目》。
Canvas标签提供2d和webgl两种形式的Context上下文，其中2d形式 的 Canvas (使用Canvas API )主要聚焦于 2D 图形，而webgl形式 的 Canvas（使用WebGL API）则用于绘制硬件加速的 2D 和 3D 图形。也就是说2d形式的Context上下文只能处理二维图形，而webgl形式Context上下文既能处理二维图形，也能处理三维图形。
如果你准备基于Canvas技术开发2D图形应用，以下开源项目（基于2d或webgl）可能对你有所帮助。
1、 fabric
fabric是一个强大的、简单易用的JavaScript HTML5 canvas库。fabric.js允许你创建并操作2D图形，如形状、文本、图像等，并提供了丰富的交互功能。
A simple and powerful Javascript HTML5 canvas library..
Git项目地址
https://github.com/fabricjs/fabric.js
Demo地址
2、 konva
Konva是一个基于2d Context的canvas类库，可同时应用于pc和移动端。Konva对象模型和API体系简明易懂，包含常用形状、事件系统、变换及分层等功能。适用场景为应用系统。
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.。
Git项目地址
https://github.com/konvajs/konva
Demo地址
3、 pixijs
一个快速的 2D渲染引擎，利用 Canvas WebGL API实现高性能的图形渲染。适用场景为游戏和动画。运行时硬件加速明显，CPU等使用率大幅飙升。
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer。
Git项目地址
https://github.com/pixijs/pixijs
Demo地址
4、 paper.js
基于HTML5 Canvas的向量图形编程界的“瑞士军刀”。适用场景为绘画艺术、广告创意和动画短片等视觉效果输出产品。
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas.
Git项目地址
https://github.com/paperjs/paper.js
Demo地址
5、 p5.js
这是一个用于创意编程的JavaScript库，旨在让艺术家、设计师和教育工作者能够轻松地学习和使用编程技术。
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creativ…
Git项目地址
https://github.com/processing/p5.js
Demo地址
6、 createjs
CreateJS 是一套可以构建丰富交互体验的 HTML5 游戏的开源工具包，旨在降低 HTML5 项目的开发难度和成本，让开发者以熟悉的方式打造更具现代感的网络交互体验。CreateJS包含以下5个套件。
EASEJS：用来处理HTML5的canvas
TWEENJS：用来处理HTML5的动画调整和javascript属性
SOUNDJS：用来帮助简化处理音频相关的API
PRELOADJS：管理和协调程序加载项的类库
ZOE：将SWF动画导出为EaseIJS的sprite的工具
A suite of open source libraries and tools for building rich interactive content on open web technologies.
Git项目地址
Demo地址
7、 react-canvas
基于react的高性能＜canvas＞渲染框架。
High performance <canvas> rendering for React components.
Git项目地址
https://github.com/Flipboard/react-canvas
Demo地址
https://github.com/Flipboard/react-canvas/tree/master/examples
8、 html2canvas
使用纯JS对浏览器截屏。
Screenshots with JavaScript
Git项目地址
https://github.com/niklasvh/html2canvas
Demo地址
https://html2canvas.hertzen.com/
9、 MDN Canvas Document
Mozilla提供的Canvas 2d Context（ Canvas API ）开发指引，包含入门（Tutorials）、参考（Reference）和指南（Guides）。MDN 提供多语言版本的Canvas API详细说明，并特别指出浏览器厂商对API的支持情况。
MDN Canvas Document地址
