什么是 Canvas?

1. 什么是 Canvas
   就是 HTML 5 给出的一个可以展示绘图内容的标签.
   最早是 苹果公司 提出的该标签.

   threejs.org 里面有汽车等 3D 的仿真

2. 基本使用
   1> 提供 Canvas 标签即可. 默认就会占据 300 * 150 的区域
   2> 利用 html 属性为它设置宽高. 不要使用 CSS 来设置.
   使用 属性设置 canvas 标签的宽高, 实际上相当于增加了 canvas 画布的像素
   但是如果使用 CSS 来设置画布的大小, 那么不会增加像素点, 只是将像素扩大了
   3> Canvas 只能展示绘图的内容. 但是不能进行绘图
   利用 Canvas 找到绘图工具
   每一个 Canvas 都有一套工具, 利用工具可以在当前 Canvas 上进行绘图
   使用语法 canvas.getContext( ‘2d’ ) 就返回一个在当前画布上绘图的工具集
   这个工具集专门绘制 平面图形. 如果要绘制 立体的图形需要传入 ‘webgl’
   绘制 平面图形的 对象是 CanvasRenderingContext2D 类型的
   4> 开始绘图
   首先需要绘制点, 然后需要将这些点描边吗才可以看到东西

3. 绘图的坐标系

   在绘图板上描述出下列点的位置

    ( 100, 100 ), ( 0, 100 ), ( 100, 0 ), ( -10, 100 ), ( 100, -10 )
   

4. 绘图的常用方法
   ctx.moveTo( x, y ) 将绘图的起始点设置为 x,y
   ctx.lineTo( x, y ) 从当前位置, 绘制直线到 x,y
   ctx.stroke() 就是将刚刚绘制的所有的点联系起来. 就可以看到图形了.

5. 绘制方法
   ctx.stroke()
   ctx.fill() 调用 fill 方法会将所有的点连接起来, 并构成一个封闭的图形结构
   如果所有的描点没有构成封闭结构, 也会将开始的起点, 与最终的点
   连接起来, 构成一个闭合的图形, 并在里面填充颜色(默认黑色)

6. 非零环绕原则
   如果需要判断某一个区域是否需要填充颜色. 就从该区域中随机的选取一个点.
   从这个点拉一条直线出来, 一定要拉到图形的外面. 此时以该点为圆心.
   看穿过拉出的直线的线段. 如果是顺时针方向就记为 +1, 如果是 逆时针方向,
   就记为 -1. 最终看求和的结果. 如果是 0 就不填充. 如果是 非零 就填充.

7. 闭合路径

   closePath()

   lineWidth 设置绘制图形的线宽

   closePath 与 直接使用 lineTo 闭合是有区别的

8. Canvas 中绘图是有状态的
   背景 粉色
   正方形 红色
   边框 蓝色

   Canvas 绘图是含有状态的, 在需要改变颜色, 绘制方法, 改变一些属性… 就需要
   改变绘图状态. 使用 beginPath() 方法. 开启一个新的路径.

9. 虚线

   [5] 实线和虚线都是5
   [10,5] 实线是10 虚线是5
   [10,5,2] 实线10 虚线5 实线2 虚线10 实线5 虚线2 实线10
   [10,5,5,10]

   ctx.setLineDash( 数组 )
   ctx.getLineDash() 获取设置的虚线数组
   ctx.lineDashOffset = 值 设置虚线的偏移

   数组中存储的数字就是分别表示 实线部分与空白部分的长度 [ 10 ]

10. 如何设置描边与填充的颜色
    ctx.strokeStyle 设置描边的颜色
    ctx.fillStyle 设置填充的颜色

11. 将直线进行封装
    function Line () {}

    var line = new Line( x0, y0, x1, y1 );
    line.stroke();