对canvas的简单解释

HTML5 是一个新兴标准，而较之HTML4，canvas则是新增的一个元素，主要用在web图形方面。（如果你懂photoshop,对接下来我讲解的就非常容易理解）

本质上：canvas 元素相当于一个白板（就如ps中的一个画布），直到您在它上面 “绘制” 一些可视内容。与拥有各种画笔的艺术家不同，您可以使用不同的方法在 canvas 上作画。您甚至可以在 canvas 上创建并操作动画，这不是使用画笔和油彩所能够实现的。（具体使用之后介绍）你可以在上面建立圆形，矩形，线条，渐变，填充等其他的和ps中的功能基本雷同。

功能上：canvas 元素从简单地创建图形元素--到--高级 JavaScript 交互（动画的关键），都可以使用到，比如图形的预处理，比如刮奖效果也可以，或者在画布上随心所欲的用鼠标绘图，或者截图什么的等等功能（网上都能找到相应的代码，不做过多解释）。

性能上：确定哪些浏览器支持 HTML5 和一个移动目标达到什么程度。在本文撰写之时，Google Chrome、Apple Safari 和 Mozilla Firefox 都支持大多数新的 HTML5 元素，它们都支持 canvas 元素。Internet Explorer 7 和 8 都不支持 HTML5；Internet Explorer 9 处于测试阶段，支持 HTML5，但还有一些问题。

在此期间，有一个针对不支持 HTML5 的 Internet Explorer 版本的补丁可用。这个补丁的前提是创建使用 JavaScript 代码的元素。例如，可以使用代码段 document.createElement_x('canvas') 创建一个可识别的 Canvas 标记；但是，这并不意味着有东西经过元素本身 。一个流行的解决方法是包含一个完整的基于 canvas 的 JavaScript 库，这个库由 Google 提供，称为 ExplorerCanvas— 或简称 excanvas。下载并将其作为一个外部文件引用，如下所示。（参见 参考资料 中的链接，了解更多 excanvas 信息。）

<!--[if IE]>

  &ltscript type="text/javascript" src="excanvas.js"></script>

<![endif]-->

通过包含 excanvas，您向 Internet Explorer 提供 canvas 及其大多数方法。

个人的一些通俗理解：就像我之前说的只要懂ps，那就基本懂canvas的使用，相当于用canvas可以创建一个画布，然后我们在上面可以创建一个一个的图层；一个canvas元素相当与一个画布，可以不用重复创建，就在上面进行很多次的图形绘制，修改，叠加之类的。而创建第二个canvas元素，相当与你独立的又创建了一张画布，你可以理解成一张图片，可以用到第一个画布中去。用定位什么都可以。在使用canvas的时候对该元素的定位地址一定要准，你用mouse或者touch事件去控制画布时，要注意触点的位置，用pageX,pageY,offsetTop等等方法去准确定位。；当然图层有先后即上下关系，canvas中也存在方法globalCompositeOperation = 'lighter'等等之类（具体代码，网上查找能找到）。其实canvas不是很难，新手多看几次，多用几次就能慢慢懂了。（一定要自己动手实践，光看没用）