canvas

什么是canvas ？

Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画。控制其每一个像素。

canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

HTML5之前的web页面只能用一些固定样式的标签：比如p、div、h1等，但有了canvas Web页面可以可以丰富多彩。

 <canvas> 标记由 Apple 在 Safari 1.3 Web 浏览器中引入。对 HTML 的这一根本扩展的原因在于，HTML在 Safari 中的绘图能力也为 Mac OS X 桌面的 Dashboard 组件所使用，并且 Apple 希望有一种方式在 Dashboard 中支持脚本化的图形。

Firefox 1.5 和 Opera 9 都跟随了 Safari 的引领。这两个浏览器都支持 <canvas> 标记。

我们甚至可以在 IE 中使用 <canvas> 标记，并在 IE 的 VML 支持的基础上用开源的 JavaScript 代码（由 Google 发起）来构建兼容性的画布。

<canvas> 的标准化的努力由一个 Web 浏览器厂商的非正式协会在推进，目前 <canvas> 已经成为 HTML 5 草案中一个正式的标签。

canvas主要应用的领域

1.游戏：canvas在基于Web的图像显示方面比Flash更加立体、更加精巧，canvas游戏在流畅度和跨平台方面更牛。 

2.可视化数据.数据图表话，比如:echart

3.banner广告：Flash曾经辉煌的时代，智能手机还未曾出现。现在以及未来的智能机时代，HTML5技术能够在banner广告上发挥巨大作用，用Canvas实现动态的广告效果再合适不过。

4.未来=> 模拟器：无论从视觉效果还是核心功能方面来说，模拟器产品可以完全由JavaScript来实现。

5.未来=> 远程计算机控制：Canvas可以让开发者更好地实现基于Web的数据传输，构建一个完美的可视化控制界面。

6.未来=> 图形编辑器：Photoshop图形编辑器将能够100%基于Web实现。

7. 其他可嵌入网站的内容(多用于活动页面、特效)：类似图表、音频、视频，还有许多元素能够更好地与Web融合，并且不需要任何插件。

浏览器不兼容的处理

        ie9以上才支持canvas, 其他chrome、ff、苹果浏览器等都支持

        只要浏览器兼容canvas，那么就会支持绝大部分api(个别最新api除外)

        移动端的兼容情况非常理想，基本上随便使用

        2d的支持的都非常好，3d（webgl）ie11才支持，其他都支持

        如果浏览器不兼容，最好进行友好提示  

canvas坐标系    

  1.1 设置绘制起点(moveTo)

 语法：ctx.moveTo(x, y);

* 解释：设置上下文绘制路径的起点。相当于移动画笔到某个位置

* 参数：x,y 都是相对于 canvas盒子的最左上角。

* 注意：**绘制线段前必须先设置起点，不然绘制无效。    

* 语法：ctx.lineTo(x, y);

* 解释：从x,y的位置绘制一条直线到起点或者上一个线头点。

* 参数：x,y 线头点坐标。

  1.2 路径开始和闭合

* 开始路径：ctx.beginPath();

* 闭合路径：ctx.closePath();

* 解释：如果复杂路径绘制，必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。

* beginPath: 核心的作用是将 不同绘制的形状进行隔离，

 每次执行此方法，表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

  1.3 描边(stroke)

* 语法：ctx.stroke();

* 解释：根据路径绘制线。路径只是草稿，真正绘制线必须执行stroke

  1.4 填充(fill)

* 语法：ctx.fill();

* 解释：填充，是将闭合的路径的内容填充具体的颜色。默认黑色。

* 注意：交叉路径的填充问题，“非零环绕原则”，顺逆时针穿插次数决定是否填充。

以下是非0环绕原则的原理：

“非零环绕规则”是这么来判断有自我交叉情况的路径的：对于路径中的任意给定区域，从该区域内部画一条足够长的线段，

使此线段的终点完全落在路径范围之外。