<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Deep画板V0.3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; touch-action: manipulation; -webkit-tap-highligh

你提供的代码是一个HTML和CSS的组合，不过代码没有闭合标签，下面帮你补全代码，同时给你一个简单的JavaScript实现基本的绘图功能。 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Deep画板V0.3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { margin: 0; padding: 0; box-sizing: border-box; touch-action: manipulation; -webkit-tap-highlight-color: transparent; font-family: 'Segoe UI', system-ui, sans-serif; } body { background: #f0f2f5; min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } .app-container { background: white; border-radius: 24px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); width: 90%; max-width: 500px; overflow: hidden; } .header { padding: 24px 16px 16px; text-align: center; background: linear-gradient(135deg, #3a7bd5, #00d2ff); color: white; border-bottom-left-radius: 24px; border-bottom-right-radius: 24px; position: relative; } .header h1 { font-size: 1.8rem; font-weight: 700; margin-bottom: 8px; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); } .header p { font-size: 0.9rem; opacity: 0.9; } .settings-btn { position: absolute; top: 24px; right: 24px; font-size: 1.3rem; color: white; background: transparent; border: none; cursor: pointer; } .toolbar { display: flex; justify-content: space-around; padding: 16px 0; background: white; border-bottom: 1px solid #f0f2f5; } .tool-btn { width: 56px; height: 56px; border-radius: 12px; background: #f8f9fa; display: flex; justify-content: center; align-items: center; font-size: 1.4rem; color: #444; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); transition: all 0.2s ease; border: none; } .tool-btn.active { background: #3a7bd5; color: white; box-shadow: 0 4px 12px rgba(58, 123, 213, 0.3); transform: scale(1.05); } #drawing-canvas { width: 100%; height: 400px; display: block; background: #f8f9fa; margin: 16px 0; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) inset; } .controls-section { padding: 0 16px 24px; } .color-picker { display: flex; overflow-x: auto; gap: 12px; padding: 12px 0; } .color-option { width: 48px; height: 48px; border-radius: 8px; cursor: pointer; border: 4px solid transparent; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08); transition: all 0.2s ease; } .color-option.active { border-color: #3a7bd5; box-shadow: 0 0 0 4px rgba(58, 123, 213, 0.2); transform: scale(1.1); } .control-row { display: flex; justify-content: space-between; align-items: center; margin: 12px 0; background: #f8f9fa; padding: 12px 16px; border-radius: 24px; } .control-label { font-size: 0.9rem; font-weight: 500; } </style> </head> <body> <div class="app-container"> <div class="header"> <h1>Deep画板V0.3</h1> <p>一款简单的绘图工具</p> <button class="settings-btn"><i class="fa-solid fa-gear"></i></button> </div> <div class="toolbar"> <button class="tool-btn"><i class="fa-solid fa-pencil"></i></button> <button class="tool-btn"><i class="fa-solid fa-eraser"></i></button> </div> <canvas id="drawing-canvas"></canvas> <div class="controls-section"> <div class="color-picker"> <div class="color-option" style="background-color: #ff0000;"></div> <div class="color-option" style="background-color: #00ff00;"></div> <div class="color-option" style="background-color: #0000ff;"></div> </div> <div class="control-row"> <span class="control-label">画笔粗细</span> <input type="range" min="1" max="20" value="5"> </div> </div> </div> <script> // 获取画布元素和2D绘图上下文 const canvas = document.getElementById('drawing-canvas'); const ctx = canvas.getContext('2d'); // 设置初始绘画状态 let isDrawing = false; let lastX = 0; let lastY = 0; let hue = 0; let direction = true; // 设置画布尺寸 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 设置画笔样式 ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; ctx.lineWidth = 5; // 开始绘画 function startDrawing(e) { isDrawing = true; [lastX, lastY] = [e.offsetX, e.offsetY]; } // 绘画过程 function draw(e) { if (!isDrawing) return; ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX, lastY] = [e.offsetX, e.offsetY]; hue++; if (hue >= 360) { hue = 0; } if (ctx.lineWidth >= 100 || ctx.lineWidth <= 1) { direction = !direction; } if (direction) { ctx.lineWidth++; } else { ctx.lineWidth--; } } // 结束绘画 function stopDrawing() { isDrawing = false; } // 添加事件监听器 canvas.addEventListener('mousedown', startDrawing); canvas.addEventListener('mousemove', draw); canvas.addEventListener('mouseup', stopDrawing); canvas.addEventListener('mouseout', stopDrawing); </script> </body> </html> ``` 额外注意的逻辑点 1. 在处理鼠标事件时，要注意不同浏览器和设备可能存在的兼容性问题，例如移动端的触摸事件和桌面端的鼠标事件处理有所不同。 2. 对于画布的尺寸设置，需要考虑到页面布局和响应式设计，确保在不同屏幕尺寸下都能正常显示。 3. 在处理颜色和画笔粗细的设置时，要确保相关的输入元素和逻辑能正确地反映到绘图操作中。 [2025-06-07 20:33:52 | AI写代码神器 | 2212点数解答]

服务商

更多选项

快捷项

直通车