一、为什么需要表单绘图？

在日常的网页交互中，传统表单只能处理文本、选择框等基础控件。但在以下场景中，绘图功能成为刚需：

1. 电子签名：合同签署、审批流程
2. 图像标注：教学批注、设计反馈
3. 创意输入：问卷调查中的涂鸦反馈

HTML5的<canvas>元素正是为此而生，它能通过JavaScript动态渲染图形，且完全兼容现代浏览器。

二、基础实现四步走

1. 创建画布容器

html

2. 初始化画布上下文

javascript const canvas = document.getElementById('drawing-canvas'); const ctx = canvas.getContext('2d'); ctx.strokeStyle = '#000000'; ctx.lineWidth = 2;

3. 实现绘图逻辑

通过监听鼠标事件实现自由绘制：javascript
let isDrawing = false;

canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});

canvas.addEventListener('mousemove', (e) => {
if (isDrawing) {
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
}
});

// 触摸设备适配
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
const touch = e.touches[0];
const mouseEvent = new MouseEvent('mousemove', {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
});

4. 保存绘图数据

提交表单时，将画布转为Base64编码：
javascript document.getElementById('drawing-form').addEventListener('submit', (e) => { const dataURL = canvas.toDataURL('image/png'); document.getElementById('drawing-data').value = dataURL; });

三、进阶功能扩展

1. 多工具切换

javascript
const tools = {
pen: {
activate() { ctx.globalCompositeOperation = 'source-over'; }
},
eraser: {
activate() { ctx.globalCompositeOperation = 'destination-out'; }
}
};

document.querySelectorAll('.tool-btn').forEach(btn => {
btn.addEventListener('click', () => {
tools[btn.dataset.tool].activate();
});
});

2. 颜色选择器

html <input type="color" id="color-picker" value="#000000">

javascript document.getElementById('color-picker').addEventListener('change', (e) => { ctx.strokeStyle = e.target.value; });

3. 线宽调节

html <input type="range" id="brush-size" min="1" max="20" value="2">

四、实际应用中的注意事项

1. 响应式适配：通过JavaScript动态调整canvas宽高
   javascript function resizeCanvas() { const ratio = window.devicePixelRatio || 1; canvas.width = canvas.offsetWidth * ratio; canvas.height = canvas.offsetHeight * ratio; ctx.scale(ratio, ratio); }

2. 性能优化：对于复杂绘图，使用requestAnimationFrame节流

3. 数据压缩：Base64数据较长时可先转为Blob对象
   javascript canvas.toBlob((blob) => { const reader = new FileReader(); reader.readAsDataURL(blob); }, 'image/jpeg', 0.8);

五、完整实例代码

点击查看GitHub仓库 获取完整实现，包含：
- 自适应画布
- 多工具切换
- 移动端支持
- 数据导出功能