Canvas--线、网格、折线

什么是Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域，您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

路径的绘制
- 描边 stroke()
- 填充 fill()
- beginPath() 开启新路径
- closePath(); 使用canvas的自动闭合 自动闭合路径和beginPath() 没有什么关系
画笔的状态
- lineWidth 线宽，默认1px
- lineCap 线末端类型：(butt默认)、round（圆形）、square（方形）
- lineJoin 相交线的拐点 miter(默认)、round（圆形）、bevel（平的）
- strokeStyle 线的颜色
- fillStyle 填充颜色
- setLineDash() 设置虚线
- getLineDash() 获取虚线宽度集合
- lineDashOffset 设置虚线偏移量（负值向右偏移）

体验绘制直线：

1. 准备画布------创建Canvas元素

<canvas id="myCanvas" width="200" height="100"></canvas>

2.准备绘制工具

/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var context = myCanvas.getContext('2d');/* web gl 绘制3d的技术*/
/*设置绘图的起始位置*/
context.moveTo(100,100);
/*轨迹  绘制路径 */
context.lineTo(200,100);
/*描边*/
context.stroke();

注意： 1.canvas画布的大小需要在标签上设置大小
2.先绘制轨迹，然后再描边才能看见

绘制平行线：

/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var context = myCanvas.getContext('2d');/* web gl 绘制3d的技术*/
/*设置绘图的起始位置*/
/*第一条线*/
context.moveTo(100,100);
context.lineTo(200,100);

/**第二条线*/
context.moveTo(100,200);
context.lineTo(300,200);

/*描边*/
context.stroke();

/*
关于默认线条的问题：
默认宽度是多少？默认颜色是什么？
1px  黑色
为什么绘制出来是2px 灰色？
因为canvas绘制时不是在1像素点中央绘制的，而是在2个像素点中间绘制的，把先分成两个0.5像素，又因为浏览器不识别0.5像素所以识别为2px.因为各占0.5像素，颜色不饱和所以为灰色
解决方案：
	线的位置向上或者向下移动0.5px
	

*/

绘制虚线：

/*获取元素*/
var myCanvas = document.querySelector('#myCanvas');
/*获取绘图工具*/
var context = myCanvas.getContext('2d');/* web gl 绘制3d的技术*/
/*设置绘图的起始位置*/
context.moveTo(100,100);
context.lineTo(200,100);

/*虚线：由实线和虚线组成  setLineDash  需要传一个数组[实线长度，虚线长度]  虚实长度一样可以传[5]
获取虚线的排列规则  getLineDash() 
ineDashOffset 设置虚线偏移量（负值向右偏移）
*/
/* 设置虚线排列规则*/
context.setLineDash([5,10])

/*描边*/
context.stroke();

绘制三条不同颜色的平行线

 /*获取元素*/
  var myCanvas = document.querySelector('#myCanvas');
 /*获取绘图工具*/
  var context = myCanvas.getContext('2d');/* web gl 绘制3d的技术*/
 /*设置绘图的起始位置*/