Cnavas 绘图
- 必须有 Canvas 画布才可以
- 利用画布获得绘图工具
- getContext( '2d' ) 平面图
- getContext( 'webgl' ) 立体图
- 利用 2d 返回一个 CanvasRenderingContext2D 类型的对象
- render 渲染( 刷新 )
- 绘图工具中提供一个方法 moveTo( x, y ) 设置绘图的起点
- 绘图工具中提供一个方法 lineTo( x, y ) 从当前位置绘制到哪里
- 每次在调用绘图方法的时候, 实际上在描点.
- 调用 stroke 来将所有的点连起来. 这里才能看到结果.
Canvas 的坐标系
绘制连续的线段
- 在绘图的过程中会保留当前位置
moveTo 设置了一个位置
lineTo 从当前位置 绘制到 指定位置, 一旦绘制完成当前位置就变成了新位置