HTML 实现超实用手写模拟器：含绘图、调色、保存等多功能及扩展建议

# 手写模拟器 HTML 实现以下是一个简单的手写模拟器的HTML实现，包含画布绘图功能： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手写模拟器</title> <style> body { margin: 0; padding: 20px; display: flex; flex-direction: column; align-items: center; font-family: Arial, sans-serif; } #canvas { border: 1px solid #000; cursor: crosshair; margin-bottom: 10px; background-color: #f9f9f9; } .controls { margin-bottom: 15px; } button { padding: 8px 15px; margin: 0 5px; cursor: pointer; } .color-picker { display: inline-block; margin-left: 10px; } </style> </head> <body> <h1>手写模拟器</h1> <div class="controls"> <button id="clearBtn">清空画布</button> <button id="saveBtn">保存图片</button> <div class="color-picker"> 颜色: <input type="color" id="colorPicker" value="#000000"> </div> <div class="size-picker"> 笔触大小: <input type="range" id="sizePicker" min="1" max="20" value="5"> </div> </div> <canvas id="canvas" width="800" height="500"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const clearBtn = document.getElementById('clearBtn'); const saveBtn = document.getElementById('saveBtn'); const colorPicker = document.getElementById('colorPicker'); const sizePicker = document.getElementById('sizePicker'); let isDrawing = false; let lastX = 0; let lastY = 0; // 设置初始绘图样式 ctx.strokeStyle = colorPicker.value; ctx.lineWidth = sizePicker.value; ctx.lineJoin = 'round'; ctx.lineCap = 'round'; // 开始绘图 canvas.addEventListener('mousedown', (e) => { isDrawing = true; [lastX, lastY] = [e.offsetX, e.offsetY]; }); // 绘图过程中 canvas.addEventListener('mousemove', draw); // 停止绘图 canvas.addEventListener('mouseup', () => isDrawing = false); canvas.addEventListener('mouseout', () => isDrawing = false); // 绘图函数 function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); [lastX, lastY] = [e.offsetX, e.offsetY]; } // 清空画布 clearBtn.addEventListener('click', () => { ctx.clearRect(0, 0, canvas.width, canvas.height); }); // 保存图片 saveBtn.addEventListener('click', () => { const link = document.createElement('a'); link.download = 'handwriting.png'; link.href = canvas.toDataURL('image/png'); link.click(); }); // 更改颜色 colorPicker.addEventListener('input', () => { ctx.strokeStyle = colorPicker.value; }); // 更改笔触大小 sizePicker.addEventListener('input', () => { ctx.lineWidth = sizePicker.value; }); </script> </body> </html> ``` ## 代码说明 1. 这个手写模拟器使用HTML5 Canvas实现绘图功能 2. 主要功能包括： - 鼠标绘图 - 调整笔触颜色和大小 - 清空画布 - 保存绘图为PNG图片 ## 扩展建议 1. 可以添加触摸屏支持，使在移动设备上也能使用 2. 可以增加橡皮擦功能 3. 可以添加撤销/重做功能 ## 注意事项 1. 画布大小是固定的800x500像素，可以根据需要调整 2. 保存功能在不同浏览器可能有不同的行为 3. 绘图数据没有持久化，刷新页面会丢失 ######[AI写代码神器 | 1024点数解答 | 2025-05-29 18:33:09]

服务商

更多选项

快捷项

自定义