原生js使用canvas实现鼠标绘制直线
目录
目录
一、原理
二、具体实现
（1）、创建画布
（2）、获取鼠标位置
（3）、创建线段类
（4）、创建主绘制类
（5）、绘制
（6）、效果图
三、源代码
1、原生js
2、vue3实现
一、原理
直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；
首先当鼠标左键点击时候获取鼠标左键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();
})（6）、效果图
三、源代码
1、原生js实现
Title
2、vue3实现
仅供学习交流，有错误请在评论区指出
觉得有用还请点个赞^_^