### canvas简介
在学习一项新技术之前,先了解这项技术的历史发展及成因会帮助我们更深刻的理解这项技术。
历史上,canvas最早是由Apple Inc. 提出的,在Mac OS X webkit中创建控制板组件使用,而在canvas称为HTML草案及标准之前,我们是通过一些替代方式去绘图的,比如为人所诟病的Flash,以及非常强大的SVG(Scalable Vector Graphics,可伸缩的矢量标记图),还有只能在IE(IE 5.0以上的版本)中使用的VML(Vector Markup Language,矢量可标记图)。甚至于有些前端可以使用div+css来完成绘图。
总的来说,没有canvas的时候,在浏览器绘制图形是比较复杂的,而在canvas出现之后,绘制2D图形相对变得容易了。
> NOTE: 用div绘制一些简单的图形,如矩形,圆形,三角形,梯形,倒也算是没那么复杂。
但canvas也有缺点。因为canvas本质上是一个与 **分辨率相关** 的 **位图画布** ,也就注定了在不同分辨率下,canvas绘制的内容显示的时候会有所不同。此外,canvas绘制的内容 **不属于任何DOM元素** ,在浏览器的元素查看器中也找不到,那自然无法检测鼠标点击了canvas中的哪个内容,很显然,这两方面,canvas都是不如SVG的。
> 举个例子:如果使用CSS设置canvas元素的尺寸,那可能会导致绘制出来的图形变得扭曲,如长方形变正方形,圆形变椭圆等,这是因为画布尺寸和元素尺寸是不一样的,画布会自动适应元素的尺寸,如果二者是成比例的,那么画布就会等比例缩放,不会出现扭曲。
这么说来,canvas有这么明显的缺点,那直接使用SVG岂不是更好?
No,听过一句话吗?没有完美的方案,只有适不适合。
SVG是基于XML的,那么就说明,SVG里面的元素都可以认为是 **DOM元素** ,可以启用DOM操作,同时,SVG中每个绘制的图像均被视为对象,若SVG对象属性变化,浏览器会自动重现图形。
以上是SVG的优势,但通过这个优势,我们也能发现一些问题:
1. 通常,过度使用DOM的应用都会变得很慢,所以,复杂的SVG会导致渲染速度变慢。但是像地图这类的应用,首选是SVG。
2. 浏览器的重排发生在浏览器窗口发生变化,元素尺寸位置变化,字体变化等等。
3. 即使可以启用DOM操作,但DOM操作的代价还是比较昂贵的(DOM和JS的实现是分开的)。
回到主题。
canvas是通过JavaScript进行2D图形的绘制,而 `