原生js使用canvas实现鼠标绘制直线

已于 2023-05-24 10:02:44 修改
阅读量4.8k 收藏 16
点赞数 6
CC 4.0 BY-SA版权
分类专栏： 无聊的小程序 文章标签： javascript 前端 html html5
于 2023-04-08 21:18:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72388638/article/details/130034235
本文详细介绍了如何使用HTML5的canvas标签结合原生js来实现鼠标点击和移动时绘制直线的功能。首先，通过获取鼠标位置并创建线段类来确定线段的起点和终点，然后在主绘制类中实现连续绘制。此外，还提供了将这一功能应用到Vue3组件中的示例代码，展示了在Vue中监听鼠标事件并进行画布操作的方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

目录

一、原理

二、具体实现

（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）、创建画布

<canvas width="600" height="400" id="mycancas">
  当前浏览器版本不支持，请升级
</canvas>

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）、效果图

d5f81b8ff0c14a4db8843a7d3284a7ca.png

 三、源代码

1、原生js实现

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    canvas{
      /*  设置画布边框 以及外边距*/
      border: 1px solid;
      margin: 100px 0 0 100px;
    }
  </style>
</head>
<body>
<canvas width="600" height="400" id="mycancas">
  当前浏览器版本不支持，请升级
</canvas>
<button id="but1"> 清屏</button>
  <script>
      /**
       * 如果想要实现图形变换操作
       * 可以创建线段数组存储线段，对线段数组操作即可
       * @type {HTMLElement}
       */

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



         //创建线段类  多个线段对象相互连接就成为了点
      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;
        }

      }

      //记录鼠标的状态
      class MyMouseXy {
          // 鼠标左键按下的坐标  也是画线段的开始坐标
          static x;
          static y;
          //鼠标移动后的坐标  也是画线段的末端的坐标
          static x2;
          static y2;
          //鼠标左键是否弹起
        static ifmouseup=false;
      }

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

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

    })


    //主绘制类，想要填加跟多的绘制图形 只需要添加方法 或者改变MyRraw.Rae的指向即可
      class MyRraw{
          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();
                }

              })
          }

      }


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

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



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

    })


        //当 “清屏按钮被点击”
        but1.onclick=function (){
            console.log("被点击")
            ctx.clearRect(0,0,canvas.width,canvas.height);
          //  ctx.clearRect(0,0,100,100);
        }

</script>
</body>
</html>

2、vue3实现 

<template>
<!--  画布-->


  <div  class="Mydiv">

    <canvas width="880" height="450" ref="canvas"  @mousedown="MouDown" @mousemove="MouMove" @mouseup="isDraw=false" @mouseleave="isDraw=false">
      浏览器版本过低，不支持canvas
    </canvas>

  </div>
<!--  <el-button type="danger" @click="clear">清除</el-button>-->
</template>

<script>
import {getCurrentInstance, onMounted, reactive,ref} from 'vue'
export default {
  name: "MyCanvas",
  setup(){
    //定义获取节点

    const canvas=ref(null);
    let ctx=ref(null);
    //用于捕捉是否绘画
    let isDraw=ref(false);

    //存储绘画线段的数据
    //点
    let pointes=reactive({
      frst:{x:'',y:''}, //第一给点
      allpointe:[],//全部
      last:{x:'',y:''} //最后一个点
        }
    );
    //线 //便于变形操作
    let Lines=reactive([]);

    //鼠标按下
  function MouDown(mou) {
    isDraw.value=true;
    let point={x:'',y:''};
      //第一个点(画线)
        point.x=mou.offsetX;
        point.y=mou.offsetY;
        //
    pointes.frst.x=mou.offsetX;
    pointes.frst.y=mou.offsetY;
    pointes.allpointe.push(point);

   // ctx.value.fillRect(point.x,point.y,100,100);
  }

    //鼠标移动 具体绘画函数,
    function MouMove(mou) {

    if(isDraw.value==true) {
      let point = {x: '', y: ''};
      //保存鼠标移动的点
      point.x = mou.offsetX;
      point.y = mou.offsetY;

      //下一个点（画线）
      pointes.last.x= mou.offsetX;
      pointes.last.y= mou.offsetY;


      //把点初始化
      pointes.allpointe.push(point);
      //画线
      lineDraw();
    }

    }

    //绘画
    function lineDraw(){

      ctx.value.beginPath();
      ctx.value.moveTo(pointes.frst.x,pointes.frst.y);

       ctx.value.lineTo(pointes.last.x,pointes.last.y)

     ctx.value.strokeStyle='red';
     ctx.value.stroke();

     //绘制结束后把下一个点给初始点
      pointes.frst.x=pointes.last.x;
      pointes.frst.y=pointes.last.y;

    }

    //清屏
    function clear(){
      // /ctx.clearRect(x,y,w,h); // (擦除一个矩形范围)
      ctx.value.clearRect(0,0,800,450);
    }




    //初始化方法
    onMounted(()=>{
      //获取页面canvas绘画版本
      canvas.value=getCurrentInstance().refs.canvas;
      //获得画笔
      ctx.value=canvas.value.getContext("2d");
      //获取DOM节点
      console.log(canvas);
    //  lineDraw();

    })
    return{
      pointes,
      MouDown,
      isDraw,
      canvas,
      ctx,
      Lines,
      MouMove,
      lineDraw,
      clear
    }

  }
}
</script>

<style scoped>
canvas{
  border: 1px solid;
  position: absolute;
  top: 20px;
  left: 20px;
}
.Mydiv{
  width:  900px;
  height: 500px;
  border: 1px solid;
}


</style>

仅供学习交流，有错误请在评论区指出

觉得有用还请点个赞^_^

Canvas鼠标画线
weixin_68658847的博客
12-04 1794
Canvas鼠标画线
Canvas 绘制路径之 beginPath() 和 closePath()
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
08-14 1343
通过本文的学习，我们不仅掌握了和方法的基本用法，还了解了如何利用这些方法来创建复杂的图形和实现动态效果。希望这些示例和技巧能帮助你在未来的项目中实现更加丰富多彩的图形界面。在实际工作中，不断尝试新的方法和技术，将使你的Canvas图形更具吸引力和实用性。欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。
使用Canvas进行鼠标画图和线程画线
01-13
使用Canvas进行鼠标画图和线程画线，创建一个Canvas，用鼠标在画布上乱画，可以设置画笔大小和颜色，开启线程会自动从屏幕顶部开始一行一行画线，直到画满整个屏幕
Vue JS画线工具——leader-line
最新发布
记录生活点滴
05-09 671
vue js画线小工具leader-line
鼠标点击动态绘制直线 canvas
weixin_64761354的博客
01-01 691
【代码】鼠标点击动态绘制直线 canvas。
canvas实现鼠标划线
sweetllh的博客
06-13 5387
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <canvas id="my" width="1000" height="700" style="border: 1px solid #f00;"></can
JavaScript - canvas - 使用鼠标画线，带撤销与重做功能
qq_29761395的博客
01-27 5869
文章目录预备知识画直线项目结构HTMLCSSJavaScript效果使用鼠标画线，带撤销与重做功能使用鼠标画线HTMLJavaScript效果添加撤销与重做功能HTMLJavaScript效果 预备知识 画直线 项目结构 HTML index.html 文件： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>画直线</titl
javascript canvas line(在页面用鼠标拉一条线，一个字，酷)
04-02
javascript canvas line(在页面用鼠标拉一条线，一个字，酷)，来源是mozilla网站
原生JS使用Canvas实现拖拽式绘图功能
10-16
原生JS使用Canvas实现拖拽式绘图功能的知识点涵盖了Canvas API的基础应用、面向对象编程思想在Canvas绘图中的运用以及鼠标事件的处理，以下是详细解析： 1. Canvas API基础知识 - Canvas元素：HTML5新增的Canvas...
canvas 鼠标绘制直线
07-28
- *1* *2* *3* [原生js使用canvas实现鼠标绘制直线](https://blog.csdn.net/weixin_72388638/article/details/130034235)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":...
HTML5 Canvas实现鼠标悬停气泡增多动画特效
资源摘要信息:"HTML5 Canvas鼠标经过气泡增多特效" 知识点概述： HTML5 Canvas是一种通过JavaScript操作绘图的API，它允许开发者在网页上绘制图形。而鼠标经过气泡增多特效是利用HTML5 Canvas元素及JavaScript编写...
html5 鼠标画直线
10-29
在html5 canvas 通过鼠标点击、拖拽、放开画出一条直线！
canvas绘制的直线动画
08-31
本文主要分享了canvas绘制的直线动画的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
canvas动态划线（canvas跟随鼠标变幻线条...）
01-02
canvas动态划线（canvas跟随鼠标变幻线条,知乎登录页面动态线条背景动画代码） 每次被下载，所需积分就被平台自动叠加，感觉有点傻，无奈重新编辑上传，感觉可选的这个1-5积分就有点少，算了无所谓了你们能下载就好
几十行js实现很炫的canvas交互特效
福禄网络研发团队的博客
11-05 830
几十行js实现很炫的canvas交互特效 废话不多说，先上效果图！ 本篇文章的示例代码都是抄的一个叫Franks的老外在yutube上的一个教学视频，他还出了很多关于canvas的视频，十分值得学习，而我对canvas也不太熟悉，跟着大神一起敲代码，做个学习笔记，还要说一下，本文示例的页面结构很简单(html只包含一个canvas)，后面代码部分就不贴了，毕竟js才是主角。 1.画圆 首先从画...
canvas 绘制跟随鼠标移动的线条
weixin_34319817的博客
08-08 1776
坦克大作战游戏中常见，点击某点，坦克的枪口会自动对准被点击的点！ window.onload = function() { var canvas = document.getElementById("canvas"); var obj = canvas.getContext('2d'); obj.moveTo( 300, 50...
canvas绘制直线
编程界明世隐的博客
01-14 3877
说明： lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 stroke() 描边 lineWidth 设置线的宽度 strokeStyle 设置线条的颜色 实例1 window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='...
canvas根据鼠标点击生成的两点生成的直线，生成垂直于直线的两个箭头的方向，用于项目越线检测)
qq_35499948的博客
08-12 1882
canvas根据鼠标点击生成的两点生成的直线，生成垂直于直线的两个箭头的方向，用于项目越线检测最终效果新的改变已知两个方向点的坐标，画箭头， 最终效果 新的改变 已知，鼠标在canvas上点击的两个点的坐标的数组为let array=[{x:10,y50},{x:200,y:450}]，根据两个点，定义这两个点生成直线的为直线L，先计算垂直于直线L的两个方向的点的坐标。 getArrowPoint(ctx, array) { //ctx为需要绘制的canvas元素的CanvasRenderingCo
canvas画直线
往事随风
04-23 1104
随着数据可视化的蓬勃发展，市场上对canavas相关的需求量越来越大，今天整理了一些canavas的一些基础操作方法，希望能帮助到大家。 万丈高楼平地起，从零开始，先使用 canavas 画一条直线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值