一、原理 直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；

首先当鼠标左键点击时候获取鼠标左键xy坐标，把当前获取得到的xy坐标赋值给线段起始点的坐标值，当鼠标移动后再获取新的鼠标位置x2和y2 再把获取得到到x2和y2赋值给线段的末尾点坐标值 ，之后两点连起来就是一段线段。之后再画一条线段，只要把前面那段线段的末尾点为起始点，再获取鼠标移动时候产生的新点，把两端相连就是一大段线段，如此重复。

canvas画线段：

ctx.beginPath();//创建绘制路径
      ctx.moveTo(this.x,this.y);//第一个点
      ctx.lineTo(this.x2,this.y2); //第二个点
        
      ctx.strokeStyle="red" //设颜色
      ctx.stroke(); //开始绘制(把前面点连接)

二、具体实现 如果不熟悉canvas标签的话可以看我上篇博客

（1）、创建画布 当前浏览器版本不支持，请升级

js获取画布

var canvas=document.getElementById("mycancas");
  //得到画布的上下文,上下文有两个 2d和3d
  //所有的图形绘制都是通过ctx属性或者方法进行设置的，和canvas标签没有关系了
  var ctx=canvas.getContext("2d")

（2）、获取鼠标位置 创建鼠标工具类

//记录鼠标的状态 class MyMouseXy { // 鼠标左键按下的坐标 也是画线段的开始坐标 static x; static y; //鼠标移动后的坐标 也是画线段的末端的坐标 static x2; static y2; //鼠标左键是否弹起 static ifmouseup=false; } 通过cavan画布内的鼠标事件获取鼠标坐标，鼠标点击画布时候牵扯到绘画，放在了后面。

// 获取鼠标在画布移动的坐标
canvas.addEventListener("mousemove", function(XY){
    MyMouseXy.x2=XY.offsetX;
    MyMouseXy.y2=XY.offsetY;
})

//鼠标左键弹起时候
canvas.addEventListener("mouseup",function (XY){
    //鼠标状态修改成弹起
    console.log("鼠标弹起")
    MyMouseXy.ifmouseup=true;

})

（3）、创建线段类 //创建线段类 多个线段对象相互连接就成为了点 class MyLine{ x2; y2; //构造方法 设置第一个点 constructor(x,y) { this.x=x; this.y=y; } //更新 设置第二点 LineUpdata=function (x,y){

this.x2=x;
      this.y2=y;
    }


    //绘制
    LineRraw=function (){
      ctx.beginPath();
      ctx.moveTo(this.x,this.y);//第一个点
      ctx.lineTo(this.x2,this.y2); //点三个

      ctx.strokeStyle="red" //设颜色
      ctx.stroke(); //开始绘制(把前面点连接)
        //这段线段绘制完成后 把当前线段的末尾点坐标赋值给下一段的起始点
        MyMouseXy.x=this.x2;
        MyMouseXy.y=this.y2;
    }

  }

（4）、创建主绘制类 为了结构更加工整 和可扩展性，我把绘制线段放到了一个类的方法中

//主绘制类，想要填加跟多的绘制图形 只需要添加方法 或者改变MyRraw.Rae的指向即可 class MyRraw{ //用于扩展绘制其他图形的 raew static raew; //绘制直线的方法Rae static Rae =function () { //通过监听器连续执行方法 把鼠标左键的点击时候的位置xy赋值给线段首点的坐标xy,再把鼠标移动后的点x2y2坐标赋值给线段末端点的坐标x2,y2 两点确定一条直线 this.raew = setInterval(() => { //创建线段 把鼠标的点传入 let myline=new MyLine(MyMouseXy.x,MyMouseXy.y); myline.LineUpdata(MyMouseXy.x2,MyMouseXy.y2); //当鼠标左键弹起时候停止绘制 if(MyMouseXy.ifmouseup!=true) { myline.LineRraw(); }

})
      }

  }

（5）、绘制 当鼠标点击时候调用主绘制类中的绘制方法执行绘制

//画布鼠标监听 按下 按下后绘制图形 canvas.addEventListener("mousedown",function (event){ MyMouseXy.ifmouseup=false;

//对于画线而言这是 鼠标按下时候获取
    MyMouseXy.x=event.offsetX;
    MyMouseXy.y=event.offsetY;



        //调用主绘制类的绘制直线的方法,绘制不同的图形只需要 动态修改 MyRraw.Rae();方法即可
        MyRraw.Rae();

})

————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/weixin_72388638/article/details/130034235