学习Canvas基础-画直线

1、什么是Canvas

canvas就是画布，可以画线，图形，填充，图像绘制等操作。
canvas不仅提供简单的二维矢量绘图，也提供三维绘图。

2、Canvas元素的定义

以下提供兼容性写法：
由于canvas是HTML5新特性，因此在低版本的浏览器中不兼容。

<!-- 兼容性写法，在低版本时标签内部的文字才会显示，版本适合情框会直接展示画布效果 -->
  <canvas id="canvas" width="500px" height="500px">你的浏览器版本过低,请升级浏览器或者使用chrome打开!</canvas>

• id 是canvas元素的标识；
• height是canvas画布的高度，单位为像素；
• width是canvas画布的宽度，单位为像素。
• 在没有设置width和height时默认为宽300px，高150px；

3、使用JavaScript获取网页中的Canvas对象

获取对象的方法：document.getElementById(对象id)
获取canvas对象的2D绘图上下文：getContext（“2d”)
2D上下文坐标系以canvas画布左上角为原点。

//  获取canvas画布
    const canvas=document.querySelector('#canvas')
    // 获取画布的应用上下文
    const ctx =canvas.getContext('2d')

4、绘制直线

• 调用beginPath()方法，指示开始绘图路径： ctx.beginPath();
• 调用moveTo()方法将坐标移至直线起点： ctx.moveTo(x,y);
• 调用lineTo()方法绘制直线： ctx.lineTo(x,y);
• 调用strokeStyle()方法，设置具体颜色ctx.strokeStyle=‘green’
• 调用lineWidth()方法，设置线宽ctx.lineWidth=10;
• 调用stroke()方法，绘制图形的边界轮廓： ctx.stroke();
• 调用closePath()方法，指示闭合绘图路径: ctx.closePath();

注：x表示水平方向的像素点，y表示垂直方向的像素点

// 开启一条新的路径
    ctx.beginPath()
    // 设置开始起点
    ctx.moveTo(10,10)
    // 设置结束位置
    ctx.lineTo(40,40)
    // 设置具体的颜色
    ctx.strokeStyle='green'
    // 设置线宽
    ctx.lineWidth=10;
    //设置上颜色——在设置着色之前设置线宽和颜色
    ctx.stroke()
    // 结束路径
    ctx.closePath()

5、效果