如何用JavaScript编写一个实现涂鸦笔功能的网页应用？

本文共计775个文字，预计阅读时间需要4分钟。

原文：本文字例为大家庭分享了JavaScript实现涂鸦笔的具体代码，供大家参考，具体内容如下：+1、部分+1.1 实现一个画框canvas id=draw width=800 height=800/canvas+1.2 css部分style+1.3 实现一个画框canvas id=draw width=800 height=800/canvas

改写后：大家庭分享了JavaScript实现涂鸦笔的代码示例，内容包含：+1、HTML部分+1.1 创建画框：canvas元素，id为draw，宽高均为800px+1.2 CSS部分+1.3 同样创建画框：canvas元素，id为draw，宽高均为800px

本文实例为大家分享了JavaScript实现涂鸦笔的具体代码，供大家参考，具体内容如下

1、html部分、css部分

1.1 实现一个画框

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

1.2 css部分

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

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%)`;          //粗细的更改     if(lineWidth < 1 || lineWidth > 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();//这是画出线的方法，没有这个方法，画不出线

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。