JavaScript如何实现涂鸦笔功能

今天小编给大家分享一下javascript如何实现涂鸦笔功能的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

1、html部分、CSS部分

1 实现一个画框

<canvas id="draw" width="800" height="800">    </canvas>

2 css部分

<style>    html,body{        margin:0;    }    canvas{        border:1px solid black;    }</style>

2、js部分

1 先让canvas是个画框,然后处理事件监听

const canvas = document.querySelector("#draw");canvas.addEventListener("mousedown",(e)=>{    });canvas.addEventListener("mouseup",(e)=>{});canvas.addEventListener("mouseover",(e)=>{});canvas.addEventListener("mouseleave",(e)=>{});

2 对监听事件进行处理

2.1 首先要先设置一个值，确保是鼠标点击后才会实现画图

let drawing = false;let x = 0, y = 0 ;canvas.addEventListener("mousedown",(e)=>{    drawing = true;    [x,y] = [e.offsetX,e.offsetY];//这个是为了让鼠标点下去之后，要记住点的位置-----记住鼠标开始的点，方便连成线});canvas.addEventListener("mouseup",(e)=>{    drawing = false;});canvas.addEventListener("mouseover",(e)=>{    //判断如果drawing为真，就返回值，console一下    if(!drawing) return;    console.log("draw");});canvas.addEventListener("mouseleave",(e)=>{    drawing = false;});

3 实现画笔的粗细变化、画笔颜色的变化

let colorDeg = 0; //为了实现使用hsl（hsl的颜色是角度取值的）的颜色取值let lineWidth = 50; //画笔粗细的定义let direction = 1; //方便变大变小，取反值用的//让上面那些值，赋值给画布ctx的值上let ctx = canvas.getContext("2d");ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;//颜色的值ctx.lineWidth = lineWidth;//线的粗细ctx.lineCap = "round"; ctx.lineJoin = "round"; canvas.addEventListener("mouseover",(e)=>{    //判断如果drawing为真，就返回值，console一下    if(!drawing) return;    console.log("draw");        //颜色操作    colorDeg = colorDeg < 360 ? colorDeg + 1 : 0 ;    ctx.strokeStyle = `hsl(${colorDeg},100%,50%)`;        //粗细的更改    if(lineWidth < 1 || lineWidth > 50){        direction =  direction * (-1);    }    lineWidth += direction;    ctx.lineWidth = lineWidth;    });

4 以上仅实现画笔的逻辑变化，我们还需要让画笔显示出来

1 首先创建一个新的路径

ctx.beginPath();//新路径的起点。

2 记录一开始点的位置

ctx.moveTo(x,y);

3 路径的终点

ctx.lineTo(e.offsetX,e.offsetY);

4 重新定义鼠标按下时的[x,y]的位置

[x,y] = [e.offsetX,e.offsetY];

5 实现了点的位置获取，需要再来一个函数来连接他们

ctx.stroke();//这是画出线的方法，没有这个方法，画不出线

以上就是“JavaScript如何实现涂鸦笔功能”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网精选频道。