Canvas是HTML5规范的一部分，它提供了一个html5的canvas标签，以及一套JavaScript api，让我们能直接在浏览器上实现绘图而不依赖任何其他插件，我们可以获取到canvas元素绘图的上下文对象，然后就可以绘制各种图形、文本、图片，以及给这些图形添加交互事件、动画，当然，需要说明的是我们要讨论的是2D的绘图API，还有一套3D的绘图 API 并不在我们的讨论范围内。
Canvas是一个简单又复杂的东西，说它简单是因为它提供的api数量并不多，说它复杂是因为要用这些仅有的api做出强大、酷炫、且性能好的效果是不容易的。
任何图形相关的你都可以通过Canvas来实现，比如：
1.图形绘制
使用 Canvas 的图形绘制 API，你可以绘制出矩形、线条、弧线、圆等等任何形状，所以你可以通过它实现图表库、流程图、思维导图、Web地图等等产品。
2.图像操作
Canvas 可以加载并显示图像，你可以在画布上绘制图像，并进行缩放、剪切、旋转等操作，并且可以直接操作画布的像素，这样就可以实现各种滤镜效果。所以你可以实现图片查看器、在线ps等产品。
3.动画效果
Canvas可以应用各种动画效果，所以你可以用来给网站添加有趣的交互效果、实现Web在线小游戏等等。
4.在线文档领域
目前很流行的各种在线文档产品大多都是使用Canvas开发的，比如在线表格、在线文本编辑器、在线白板等等。
总的来说，Canvas 是一个强大的工具，唯一限制你的只有你的想象力。
1.Canvas给我们提供了一个空白画布，我们可以在上面绘制任何东西来表达想法和创造力。
2.更好的完成实际项目中涉及到的可视化需求，给网站添加富有表现力的各种可视化效果，提升产品的使用体验和竞争力。
2.Canvas的使用涉及到JavaScript、图形、数学等等知识，所以可以提升自身竞争力，增加前端开发技能，拓宽工作范围。
SVG是一种用于描述二维矢量图形的XML格式文件，它也可以用来在浏览器上实现图形绘制和动画效果，那么它和Canvas有什么不同之处呢：
1.绘图方式：SVG 使用矢量图形绘制，而 Canvas 使用位图绘制。SVG通过XML格式来描述图形的形状和样式，而Canvas通过JavaScript的绘图API实现绘图。
2.渲染方式：SVG的每个图形都是DOM节点，而Canvas是直接操作像素，以位图的方式渲染，所以对于复杂、大数据量的情况下性能可能更好。
3.动态性：SVG图形可以轻松的通过CSS修改它的样式，通过JS来监听和处理它的事件，而Canvas绘制完成后只是一张图片，所以无法直接修改已经绘制的图形，对于事件的处理也没有提供简单而直接的方法。
综合考虑，对于需要静态、可缩放、可交互的图形和图表，以及需要通过修改属性和事件来实现动画效果的场景，SVG 是一个不错的选择。而对于需要实时绘制和处理大量复杂图形的场景，或需要更高的渲染性能的场景，Canvas 可能更适合。
本教程不会事无巨细的介绍Canvas的每个api、每个参数，毕竟这些比较枯燥，也完全可以在 MDN 的文档中学习，所以会更倾向于通过各种实际案例以及有趣的效果来加深对Canvas的理解和应用。
本教程的大部分实战源代码可以在这个仓库获取https://github.com/wanglin2/canvas-demos。
最后，让我们开启这趟旅程把。