本篇整理了前端鼠标事件MouseEvent核心属性和Canvas 2D 绘图上下文ctx常用函数全是开发高频使用知识点新手也能直接看懂、拿来就用一、鼠标事件MouseEvent5 大核心用法 完整代码示例1.五大鼠标事件速查表表格事件名触发时机典型用途click鼠标按下 抬起后触发完整点击按钮点击、菜单切换、普通交互mousedown鼠标刚按下的瞬间触发拖拽开始、绘图落笔、长按开始mouseup鼠标刚抬起的瞬间触发拖拽结束、松开按键mousemove鼠标在元素上移动时持续触发鼠标跟随、画板绘图、实时定位mouseover鼠标移入元素时触发悬浮提示、高亮、显示隐藏菜单2.具体基本语法和示例2.1 click 鼠标点击事件元素.addEventListener(click, function(event) { // 点击后执行的代码 });示例button idbtn点击我/button script const btn document.getElementById(btn); btn.addEventListener(click, function(e) { alert(click 事件触发); }); /script2.2 mousedown 鼠标按下元素.addEventListener(mousedown, function(event) { // 鼠标按下瞬间执行 });示例div idbox stylewidth:200px;height:200px;background:silver/div script const box document.getElementById(box); box.addEventListener(mousedown, function() { box.style.background gray; }); /script2.3 mouseup 鼠标抬起元素.addEventListener(mouseup, function(event) { // 鼠标松开瞬间执行 });示例div idbox stylewidth:200px;height:200px;background:silver/div script const box document.getElementById(box); box.addEventListener(mouseup, function() { box.style.background white; }); /script2.4 mousemove 鼠标移动元素.addEventListener(mousemove, function(event) { // 鼠标在元素上移动时持续触发 });示例div idbox stylewidth:300px;height:300px;background:#eee/div p idtext/p script const box document.getElementById(box); const text document.getElementById(text); box.addEventListener(mousemove, function(e) { text.textContent X: ${e.offsetX}, Y: ${e.offsetY}; }); /script2.5 mouseover 鼠标移入元素.addEventListener(mouseover, function(event) { // 鼠标进入元素时触发 });示例div idbox stylewidth:200px;height:200px;border:1px solid #000/div script const box document.getElementById(box); box.addEventListener(mouseover, function() { box.style.background lightblue; }); /script2.6 mouseout 鼠标移出配套常用元素.addEventListener(mouseout, function(event) { // 鼠标离开元素时触发 });示例div idbox stylewidth:200px;height:200px;border:1px solid #000/div script const box document.getElementById(box); box.addEventListener(mouseout, function() { box.style.background ; }); /script二、Canvas 2D 上下文ctx常用函数全整理ctxcanvas.getContext(2d)是 Canvas 2D 绘图的核心操作对象所有绘图、样式、变换都通过它实现按功能分类整理1. 绘图状态保存 / 恢复函数 / 属性作用说明ctx.save()保存当前绘图状态保存样式、变换、裁剪区域等所有状态ctx.restore()恢复上一次保存的状态配合 save 使用避免样式污染2. 路径绘制画线条、不规则图形函数作用语法 / 说明ctx.beginPath()开启新路径必须先调用否则会继承上一次路径ctx.moveTo(x, y)移动画笔起点不画线仅定位画笔ctx.lineTo(x, y)画直线到指定坐标连接起点和目标点ctx.closePath()闭合路径自动连接终点和起点形成封闭图形ctx.stroke()描边路径用边框色绘制路径ctx.fill()填充路径用填充色填满路径内部3. 基础形状绘制函数作用语法ctx.rect(x, y, w, h)画矩形路径x/y 左上角坐标w 宽h 高ctx.strokeRect(x,y,w,h)直接描边矩形无需 beginPath/strokectx.fillRect(x,y,w,h)直接填充矩形无需 beginPath/fillctx.arc(x,y,r,start,end,anticlockwise)画圆形 / 圆弧x/y 圆心r 半径角度为弧度ctx.ellipse(x,y,rx,ry,rot,start,end)画椭圆rx 横向半径ry 纵向半径4. 样式设置颜色、线条、文字属性 / 函数作用示例ctx.fillStyle设置填充颜色ctx.fillStyle redctx.strokeStyle设置描边颜色ctx.strokeStyle #000ctx.lineWidth设置线条宽度ctx.lineWidth 2ctx.lineCap设置线条端点样式butt/round/squarectx.font设置文字样式ctx.font 16px 微软雅黑ctx.textAlign设置文字对齐left/center/right5. 文本绘制函数作用ctx.fillText(text, x, y)填充文字ctx.strokeText(text, x, y)描边文字ctx.measureText(text)获取文字宽度6. 图像绘制函数作用ctx.drawImage(img, x, y)绘制图片ctx.drawImage(img, x,y,w,h)缩放绘制图片ctx.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh)裁剪图片后绘制7. 画布变换平移、旋转、缩放函数作用ctx.translate(x, y)平移画布原点ctx.rotate(angle)旋转画布弧度ctx.scale(x, y)缩放画布8. 画布清除函数作用ctx.clearRect(x,y,w,h)清除指定区域画布ctx.clearRect(0,0,canvas.width,canvas.height)清空整个画布9. 进阶像素操作函数作用ctx.getImageData(x,y,w,h)获取画布像素数据ctx.putImageData(data, x,y)将像素数据绘制到画布