HTML5在线如何实现画笔涂鸦功能 HTML5在线画板应用的开发教程

<canvas id="drawingBoard" width="800" height="600" style="border: 1px solid #ccc;">
  您的浏览器不支持Canvas
</canvas>

const canvas = document.getElementById('drawingBoard');
const ctx = canvas.getContext('2d');
let isDrawing = false;
<p>// 鼠标按下开始绘画
canvas.addEventListener('mousedown', (e) => {
isDrawing = true;
const rect = canvas.getBoundingClientRect();
ctx.beginPath();
ctx.moveTo(e.clientX - rect.left, e.clientY - rect.top);
});</p><p>// 鼠标移动时绘制线条
canvas.addEventListener('mousemove', (e) => {
if (!isDrawing) return;
const rect = canvas.getBoundingClientRect();
ctx.lineTo(e.clientX - rect.left, e.clientY - rect.top);
ctx.stroke();
});</p><p>// 鼠标松开停止绘画
canvas.addEventListener('mouseup', () => {
isDrawing = false;
});</p><p>// 鼠标离开画布区域也停止
canvas.addEventListener('mouseout', () => {
isDrawing = false;
});</p>

// 设置画笔颜色和粗细
function setBrush(color, width) {
  ctx.strokeStyle = color;
  ctx.lineWidth = width;
}
<p>// 示例：红色粗线
setBrush('#ff0000', 5);</p>

<input type="color" value="#000000" onchange="setBrush(this.value, document.getElementById('lineWidth').value)">
<input type="range" id="lineWidth" min="1" max="20" value="3" oninput="setBrush(document.querySelector('[type=color]').value, this.value)">

<button onclick="clearCanvas()">清空画布</button>
<p>function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}</p>