canvas

Cnavas 绘图

1. 必须有 Canvas 画布才可以
2. 利用画布获得绘图工具
   • getContext( '2d' ) 平面图
   • getContext( 'webgl' ) 立体图
   • 利用 2d 返回一个 CanvasRenderingContext2D 类型的对象
3. render 渲染( 刷新 )
4. 绘图工具中提供一个方法 moveTo( x, y ) 设置绘图的起点
5. 绘图工具中提供一个方法 lineTo( x, y ) 从当前位置绘制到哪里
6. 每次在调用绘图方法的时候, 实际上在描点.
7. 调用 stroke 来将所有的点连起来. 这里才能看到结果.

Canvas 的坐标系

绘制连续的线段

1. 在绘图的过程中会保留当前位置
   moveTo 设置了一个位置
   lineTo 从当前位置 绘制到 指定位置, 一旦绘制完成当前位置就变成了新位置