理解canvas元素，绘制简单2D绘图形

一、canvas 简介

图形和动画已经日益成为浏览器中现代 Web 应用程序的必备功能，但实现起来仍然比较困难，既要兼顾美观又不能拖慢浏览器。目前已经有一套日趋完善的 APT 和工具可以用来开发此类功能。

毋庸置疑，是 HTML5 最受欢迎的新特性。​Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域动态在上面绘制图片，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。最早是苹果公司提出并准备用在控制面板中的，随着其他浏览器的迅速跟进，HTML5 将其纳入标准。目前所有主流浏览器都在某种程度上支持元素。

二、Canvas基本使用

2.1  元素

创建元素时至少要设置其 width 和 height 属性，这样才能告诉浏览器在多大面积上绘图。出现在开始和结束标签之间的内容是后备数据，会在浏览器不支持元素时显示。比如: