1.canvas在低版本浏览器不兼容，需要对用户作出提示，高版本浏览器则不会显示标签内部内容

    1.   <canvas id="canvas" style="width: 500;" height="600">
    2.     当前浏览器不支持，请升级浏览器
    3.   </canvas>

    2.canvas只是html5普通的标签，要想居中则需要转换为块级元素，且不要在css中写宽高，会带来问题，在标签上写即可（操作canvas只能使用原生js，jquery无法操作canvas标签）

    使用canvas画直线的步骤

    1. 获取画布
    2. 获取画布上下文（环境） （前2步固定）
    3. 给画布重新标注宽高（因为我们在样式中写的宽高，和实际宽高不符合
    4. 开始一条路径
    5. 确定起始点
    6. 确定结束点
    7. 着色（描线）
    8. 结束路径
      1.      var canvas = document.getElementById('canvas');   //获取画布
      2.      var ctx = canvas.getContext('2d');        //获取画布上下文（环境）
      3.      canvas.width = 500;
      4.      canvas.height = 800            //给画布重新标注宽高（因为我们在样式中写的宽高，和实际宽高不符合
      5.      ctx.beginPath()                 //开始一条路径
      6.      ctx.moveTo(100, 100);          //确定起始点
      7.      ctx.lineTo(300, 300);          //确定结束点
      8.      ctx.lineWidth = 5;
      9.      ctx.strokeStyle = 'red'
      10.      ctx.stroke()                //着色
      11.      ctx.closPath();             // 结束路径
      内部用到的 坐标 参照下图
      这个步骤非常严密，需要把逻辑想好，从而在canvas画布画上一条红色的线
      image.png
      在这里可以看到我加了
      ctx.lineWidth = 5;
ctx.strokeStyle = 'red'
      第一个是线条的宽度，第二个是线条的颜色
      注意 ： 线条的颜色必须在 ctx.stroke() 着色之前加入，不然会失效（默认线为黑色）

    假如我们需要画几条线段，则要按照上面的方法重复下面的代码

    • 开始一条路径
    • 确定起始点
    • 确定结束点
    • 着色
    • 结束路径
            ctx.beginPath()      
        ctx.moveTo(400, 400)
        ctx.lineTo(400, 500)
      //可以加线宽和颜色
        ctx.stroke()

    那如果是画图像的话，比如三角形，我们只需要标注起始点，和其他2个点的坐标，然后按照开头步骤执行

           ctx.moveTo(100, 100);
       ctx.lineTo(200, 100);
       ctx.lineTo(200, 200);

    比如我们需要画很多条线，难道我们需要很多次这些属性嘛，答案当然不是，我们可以将大量相同的代码封装到函数中

      function drawLine(x, y, x1, y1, color, width) {
            ctx.beginPath();
            ctx.moveTo(x, y);
            ctx.lineTo(x1, y1);
            ctx.lineWidth = width;
            ctx.strokeStyle = color;
            ctx.stroke();
            ctx.closePath();
        }
        drawLine(100, 100, 200, 300, 'red', 5);
       //同上

    那如果我们需要画一条横着的虚线呢？
    分析：
    相同点
    1.横着的虚线 由横着的实线构成，每条线的高度相等，且彼此之间间隔相等，
    2.假设每条线段宽5px 间隔5px，则
    （起点不为第一个点）
    第一个点到终点间隔为5
    第一个点到第二个点的起点为10
    100，100 — 105，100 — 110 —- 115 ，100 —- 120，100

    利用上面封装的函数如下

     drawLine(100, 100, 105, 100, 'red', 5)
        drawLine(110, 100, 115, 100, 'red', 5)
        drawLine(120, 100, 125, 100, 'red', 5)
        drawLine(130, 100, 135, 100, 'red', 5)
        drawLine(140, 100, 145, 100, 'red', 5)
        drawLine(150, 100, 155, 100, 'red', 5)

    这样确实可以达到效果，但存在4个相同的变量，我们知道函数可以做相同的事，但这里用 for循环 更简单

      for (var i = 0; i < 30; i++) {
            drawLine(100 + 10 * i, 100, 105 + i * 10, 100, 'red', 5);
        }

    这样就可以达到效果，
    image.png
    画斜着的虚线则就是改变y的值，x相等，这里不多追述