一直以来，web上的动画都是flash实现的，例如，广告、游戏等。

 

　　flash是有缺点的，例如我们需要安装Adobe flash player插件，并且漏洞多、重量比较大、卡顿、不流畅等。

 

　　因此，HTML5推出了新的画布标签—canvas。

 

　　canvas是一个轻量级的画布，我们使用canvas进行JavaScript编程，不需要增加额外的插件，性能也很好，不卡顿，在手机中也很流畅。

 

　　canvas彻底颠覆了flash的主导地位。无论是广告、游戏，都可以用canvas实现。

 

　　canvas的本质：利用代码在浏览器上进行画画。

 

　　canvas有2个属性，分别是width、height，可以设置画布的宽度、高度。

 

　　注意事项：画布的宽和高不要用css样式去设置，如果使用css样式设置，画布就会失真、变形。

 

　　canvas标签里的文字是用来提示低版本的浏览器（IE6、IE7、IE8），所以低版本浏览器可以看到标签内容。

 

　　高版本的浏览器是看不到canvas标签里的文字的。

 

　　getContext方法：获取上下文。

 

　　fillStyle属性：设置颜色（填充样式）。

 

　　fillRect方法：绘制图形（填充矩形）。

 

　　fillRect有四个属性，分别是x坐标、y坐标、绘制的宽度、绘制的高度。

 

　　从上面的代码可以看出，ctx获取了2d的属性和方法，所以ctx变成了对象，也能使用链式语法。