这篇文章主要为大家详细介绍了JavaScript实现涂鸦笔功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript实现涂鸦笔的具体代码，供大家参考，具体内容如下
1、html部分、css部分
1.1 实现一个画框
1.2 css部分
2、JS部分
2.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 对监听事件进行处理
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; });2.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%)`; > 50){ direction = direction * (-1); } lineWidth += direction; ctx.lineWidth = lineWidth; });2.4 以上仅实现画笔的逻辑变化，我们还需要让画笔显示出来
2.4.1 首先创建一个新的路径
ctx.beginPath();//新路径的起点。
2.4.2 记录一开始点的位置
ctx.moveTo(x,y);
2.4.3 路径的终点
ctx.lineTo(e.offsetX,e.offsetY);
2.4.4 重新定义鼠标按下时的[x,y]的位置
[x,y] = [e.offsetX,e.offsetY];
2.4.5 实现了点的位置获取，需要再来一个函数来连接他们
ctx.stroke();//这是画出线的方法，没有这个方法，画不出线
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是JavaScript实现涂鸦笔功能的详细内容，更多请关注0133技术站其它相关文章！
