Canvas实现网页涂鸦板

Canvas 是HTML5中提供的一种图形绘制API，它允许开发者直接在网页上创建动态的、交互式的绘图区域，比如涂鸦板。在JavaScript中，你可以通过创建一个`<canvas>`元素并在其上使用`CanvasRenderingContext2D`对象来进行绘画操作。以下是一个简单的步骤：

1. **创建元素**：首先，在HTML中添加一个 canvas 元素，给它设置一个 ID 以便后续引用。

<canvas id="drawboard" width="800" height="600"></canvas>

2. **获取上下文**：在 JavaScript 中，使用 `document.getElementById()` 获取 canvas，并获得它的 2D 渲染上下文。

const canvas = document.getElementById('drawboard');
const ctx = canvas.getContext('2d');

3. **绘图函数**：创建一个函数，用于接收用户的鼠标事件，如 `mousedown`, `mousemove`, 和 `mouseup`，并在画布上绘制线条。

let isDrawing = false;
let lastX, lastY;

function draw(e) {
    if (isDrawing) {
        const x = e.clientX - canvas.offsetLeft;
        const y = e.clientY - canvas.offsetTop;
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
        ctx.lineTo(x, y);
        ctx.stroke();
        [lastX, lastY] = [x, y];
    }
}

4. **监听事件**：注册鼠标事件监听器，开始绘制时设置 `isDrawing` 为 true，并记录上一次点击的位置；释放鼠标时，清除标记并停止绘制。

canvas.addEventListener('mousedown', function(e) {
    isDrawing = true;
    lastX = e.clientX;
    lastY = e.clientY;
});

canvas.addEventListener('mouseup', function() {
    isDrawing = false;
    // 清除最后一个点的痕迹或其他清理工作
});

这样就实现了基本的涂鸦功能。如果你想添加更多的特性，比如颜色选择、橡皮擦等，可以继续扩展这个基础框架。