使用canvas制作一个画板

## 使用 Canvas 制作一个画板

在 Web 开发中，`<canvas>` 元素提供了一个强大的 API 来实现各种绘图功能。本文将介绍如何使用 `canvas` 创建一个基本的画板，支持绘制、清空和更改画笔颜色。

### 1. 创建 HTML 结构

首先，我们需要一个 `canvas` 画布，并添加一些控制按钮：

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas 画板</title>
    <style>
        body { text-align: center; }
        canvas { border: 1px solid black; cursor: crosshair; }
    </style>
</head>
<body>
    <h1>Canvas 画板</h1>
    <canvas id="drawingBoard" width="800" height="500"></canvas>
    <br>
    <button onclick="clearCanvas()">清空画布</button>
    <input type="color" id="colorPicker" value="#000000">
    <script src="script.js"></script>
</body>
</html>

2. JavaScript 实现绘制功能

在 script.js 文件中，添加以下代码：

const canvas = document.getElementById("drawingBoard");
const ctx = canvas.getContext("2d");
const colorPicker = document.getElementById("colorPicker");

let drawing = false;

// 设置画笔颜色
colorPicker.addEventListener("input", () => {
    ctx.strokeStyle = colorPicker.value;
});

// 监听鼠标事件
canvas.addEventListener("mousedown", () => drawing = true);
canvas.addEventListener("mouseup", () => drawing = false);
canvas.addEventListener("mousemove", draw);

function draw(event) {
    if (!drawing) return;
    ctx.lineWidth = 5;
    ctx.lineCap = "round";
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(event.offsetX, event.offsetY);
}

// 清空画布
function clearCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}

3. 关键实现解析

1. 获取 Canvas 上下文

   • canvas.getContext("2d") 获取 2D 绘图上下文。

2. 鼠标事件绑定

   • mousedown 开始绘制。
   • mouseup 结束绘制。
   • mousemove 监听鼠标移动，动态绘制路径。

3. 实现绘制逻辑

   • ctx.lineTo(event.offsetX, event.offsetY) 连接到鼠标位置。
   • ctx.stroke() 绘制当前路径。
   • ctx.beginPath() 开始新的路径，避免连线断裂。

4. 清空画布

   • ctx.clearRect(0, 0, canvas.width, canvas.height) 清除整个画布。

4. 进一步优化

1. 调整画笔大小

   • 可添加 <input type="range" id="sizePicker" min="1" max="10" value="5"> 控制画笔粗细。
   • 在 draw 方法中使用 ctx.lineWidth = sizePicker.value;。

2. 添加橡皮擦功能

   • 创建一个橡皮擦按钮，点击后 ctx.strokeStyle = "#FFFFFF";。

3. 支持触摸事件

   • 监听 touchstart、touchmove 事件，使其适用于移动端。

通过以上步骤，我们成功实现了一个简单的 Canvas 画板，并可以进一步扩展功能以已完成 Canvas 画板的详细实现，包括 HTML 结构、JavaScript 绘制功能及优化建议。请检查并提出修改需求！