Canvas画布，用画布创建一个可以写字画画的一个框架

一个想要翻身的咸鱼*^*

于 2023-03-18 16:52:59 发布

阅读量330

点赞数 1

分类专栏： HTML前端文章标签： javascript html 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qqqddd_yyqx/article/details/129620404

版权

HTML前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

效果如下

1.创建画布，给画布一个id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <canvas id="mycanvas" width="800" height="500" style="border: 1px solid pink;"></canvas>
</body>

</script>

</html>

创建完画布后，其他基本都是用JavaScript写

2.创建画笔，在script里面写

 let cav=document.querySelector("#mycanvas");//获取画布
 let cxt=cav.getContext("2d");

3.获取鼠标移动的坐标

其中，鼠标按下时确定鼠标的位置，当鼠标开始移动后再记录鼠标的位置，用mousedown和mousemove事件完成。clientX和clientY获取鼠标的坐标。

 cav.onmousedown=function(){
    let x1=event.clientX;
    let y1=event.clientY;
    cas.moveTo(x1,y1);
    cav.onmousemove=function(){
      let x2=event.clientX;
      let y2=event.clientY;
      cas.lineTo(x2,y2);
      cas.stroke();
    }
  }

当我运行后发现虽然可以在画布里面写，但是鼠标释放后却停不下来，那么就需要用到mouseup事件让画笔在鼠标释放后停止划线。

  cav.onmouseup=function(){
  cav.onmousemove=null;
  }

现在鼠标已经可以在画布中随意写字画画了，可是发现线条是从鼠标中间的位置延展画出来的，所以需要将坐标减去偏移量offsetLeft和offsetTop。

 cav.onmousedown=function(){
    let x1=event.clientX-cav.offsetLeft;
    let y1=event.clientY-cav.offsetTop;
    cas.moveTo(x1,y1);
    cav.onmousemove=function(){
      let x2=event.clientX-cav.offsetLeft;
      let y2=event.clientY-cav.offsetTop;
      cas.lineTo(x2,y2);
      cas.stroke();
    }
  }

4.清除整个画布以及其他功能

在画布后面放一个button按钮，点击按钮后，可以清空整个画布，用clearRect实现。除了清除按钮以外，还有选择颜色，选择线条粗细。

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="mycanvas" width="800" height="500" style="border: 1px solid pink;"></canvas>
    <button id="clear">清除图像</button>
    <button id="btn1">--请选择线条粗细--
    <input type="range" value="1" id="rang" style="display: none;"></input></button>
    <input type="color" id="color"><!--改变颜色-->
</body>
<script>
    //获取id
    let cav=document.querySelector("#mycanvas");
    let clear=document.querySelector("#clear");
    let rang=document.querySelector("#rang");
    let color=document.querySelector("#color");
    let btn1=document.querySelector("#btn1");
    let cas=cav.getContext("2d");
    cav.onmousedown=function(){
        cas.beginPath();//为了让每次清空画布后，不受前面的影响
        let x1=event.clientX-cav.offsetLeft;
        let y1=event.clientY-cav.offsetTop;
        cas.moveTo(x1,y1);
        cav.onmousemove=function(){
            let x2=event.clientX-cav.offsetLeft;
            let y2=event.clientY-cav.offsetTop;
            cas.lineTo(x2,y2);
            cas.stroke();
            cas.lineWidth=fontwidth;//将改变后的线条大小赋值给lineWidth线条宽度
            cas.strokeStyle=col;
            
        }
    }
    cav.onmouseup=function(){
        cav.onmousemove=null;
    }
    clear.onclick=function(){
        cas.clearRect(0,0,800,500);//清空画布
    }
    btn1.onclick=function(){
        rang.style.display="block";
    }
    let fontwidth=1//设置线条初始值为1
    rang.onchange=function(){
        fontwidth = parseInt(rang.value / 10);     
            if (fontwidth < 1) {                      
                fontwidth = 1
            }
    }
    let col=null;
    color.onchange=function(){
        col=color.value;//改变颜色
    }
</script>
</html>