本文详细介绍如何使用JavaScript和Canvas元素实现一个简易的涂鸦笔功能。内容涵盖HTML画布创建、CSS样式设置，以及通过监听mousedown、mouseup、mouseover等鼠标事件来控制绘图状态。重点解析了如何动态调整画笔颜色（HSL模式）与粗细，并利用beginPath、moveTo和lineTo方法绘制连续线条，最终通过stroke()完成渲染。
本文分享了一个使用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、JavaScript逻辑实现
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();//这是画出线的方法，没有这个方法，画不出线以上就是本文的全部内容，希望对读者的学习有所帮助，欢迎继续支持本站。