HTML5 Canvas简介

Canvas 的概念最初是由苹果公司提出的，用于在 Mac OS X WebKit 中创建控制板部件（dashboard widget）。在 Canvas 出现之前，开发人员若要在浏览器中使用绘图API，只能使用Adobe
的Flash 和SVG（Scalable Vector Graphics，可伸缩矢量图形）插件，或者只有IE才支持的 VML（Vector Markup Language，矢量标记语言），以及其他一些稀奇古怪的 JavaScript 技巧。

假设我们要在没有canvas元素的条件下绘制一条对角线——听起来似乎很简单，但实际上如果没有一套二维绘图 API 的话，这会是一项相当复杂的工作。HTML5 Canvas能够提供这样的功能，对浏览器端来说此功能非常有用，因此 Canvas被纳入了HTML5规范。

起初，苹果公司曾暗示可能会为WHATWG（Web Hypertext Application Technology Working Group，Web 超文本应用技术工作组）草案中的 Canvas 规范申请知识产权，这在当时引起了一些Web 标准化追随者的关注。不过，苹果公司最终还是按照 W3C 的免版税专利权许可条款公开了其专利。

CANVAS和SVG对比

“ Canvas 本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像SVG图像那样可以被放大缩小。此外，用Canvas 绘制出来的对象不属于页面DOM 结构或者任何命名空间——这点被认为是一个缺陷。SVG 图像却可以在不同的分辨率下流畅地缩放，并且支持点击检测（能检测到鼠标点击了图像上的哪个点）。

既然如此，为什么WHATWG的HTML5 规范不使用SVG呢？尽管Canvas有明显的不足，但 HTML Canvas API有两方面优势可以弥补：首先，不需要将所绘制图像中的每个图元当做对象存储，因此执行性能非常好；其次，在其他编程语言现有的优秀二维绘图 API的基础上实现Canvas API相对来说比较简单。毕竟，二鸟在林不如一鸟在手。”