使用 HTML5 画布创建绘图板网页应用

介绍

在本项目中，我们将逐步创建一个简单的基于网页的绘图板应用程序。每一步都将基于上一步进行构建，使你能够逐步为应用程序添加功能。在本项目结束时，你将拥有一个功能齐全的绘图板，用户可以在上面绘图、更改画笔颜色、调整画笔大小以及清除画布。

👀 预览

🎯 任务

在本项目中，你将学习：

如何为绘图板网页应用程序设置 HTML 结构。
如何创建并获取 HTML <canvas> 元素的 2D 渲染上下文。
如何实现事件监听器以跟踪绘图时的鼠标操作。
如何添加一个“清除”按钮并实现清除画布的功能。
如何创建一个颜色选择器输入并实现更改画笔颜色的功能。
如何添加一个范围输入来调整画笔大小并实现该功能。

🏆 成果

完成本项目后，你将能够：

使用 HTML 创建基本的网页结构。
使用 JavaScript 事件监听器处理用户交互。
使用 HTML <canvas> 元素进行绘图。
使用 CSS 为网页应用程序设置样式。
结合 HTML、CSS 和 JavaScript 构建一个功能齐全的绘图板。

创建 HTML 结构

要求：

打开 index.html 文件。
在 index.html 中使用画布、标题和控制元素设置基本的 HTML 结构。

功能：

将创建项目文件和基本的 HTML 结构，但此时还没有绘图功能。

步骤：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>绘图板</title>
  </head>
  <body>
    <header>
      <h1>绘图板</h1>
    </header>
    <div class="container">
      <div class="controls">
        <input type="color" id="color-picker" value="#000000" />
        <label for="brush-size">画笔大小：</label>
        <input type="range" id="brush-size" min="1" max="20" value="5" />
        <button id="clear-btn">清除</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

✨ 查看解决方案并练习

添加画布

要求：

在 index.html 中，添加一个 ID 为“whiteboard”的 <canvas> 元素，并设置你选择的尺寸（宽度和高度）。

功能：

画布将被添加到网页中，但此时它还没有任何绘图功能。

步骤：

<body>
  <header>
    <h1>绘图板</h1>
  </header>
  <div class="container">
    <!--添加画布-->
    <canvas id="whiteboard" width="800" height="400"></canvas>
    <div class="controls">
      <input type="color" id="color-picker" value="#000000" />
      <label for="brush-size">画笔大小：</label>
      <input type="range" id="brush-size" min="1" max="20" value="5" />
      <button id="clear-btn">清除</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

✨ 查看解决方案并练习

添加绘图功能

要求：

在 script.js 中添加 JavaScript 代码，以便在鼠标点击并移动时能够在画布上绘图。
为 mousedown、mouseup 和 mousemove 事件实现事件监听器。

功能：

用户现在可以使用鼠标在画布上绘图。

步骤：

const canvas = document.getElementById("whiteboard");
const context = canvas.getContext("2d");

let drawing = false;

canvas.addEventListener("mousedown", () => {
  drawing = true;
  context.beginPath();
});

canvas.addEventListener("mouseup", () => {
  drawing = false;
  context.closePath();
});

canvas.addEventListener("mousemove", draw);

function draw(e) {
  if (!drawing) return;

  context.lineCap = "round";

  context.lineTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
  context.stroke();
  context.beginPath();
  context.moveTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
}

这段代码实现了在鼠标点击并移动时在画布上绘图的功能。

✨ 查看解决方案并练习

添加清除功能

要求：

在 script.js 中添加 JavaScript 代码，以便在点击“清除”按钮时清除画布。
在 index.html 中创建一个 ID 为“clear-btn”的按钮。

功能：

用户可以清除画布以开始新的绘图。

步骤：

const clearButton = document.getElementById("clear-btn");

clearButton.addEventListener("click", () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

这段代码允许用户通过点击“清除”按钮来清除画布。

✨ 查看解决方案并练习

添加画笔颜色控制

要求：

在 script.js 中添加 JavaScript 代码，以便用户能够使用 <input type="color"> 元素选择画笔颜色。
在 index.html 中创建 ID 为“color-picker”的颜色选择器输入框。

功能：

用户可以为他们的画笔选择颜色。

步骤：

const colorPicker = document.getElementById("color-picker");

colorPicker.addEventListener("input", (e) => {
  context.strokeStyle = e.target.value;
});

这段代码允许用户使用颜色选择器选择画笔颜色。

✨ 查看解决方案并练习

添加画笔大小控制

要求：

在 script.js 中添加 JavaScript 代码，以便用户能够使用 <input type="range"> 元素来调整画笔大小。
在 index.html 中创建 ID 为“brush-size”的范围输入框。

功能：

用户可以更改画笔大小，以绘制更粗或更细的线条。

步骤：

const brushSizeInput = document.getElementById("brush-size");

brushSizeInput.addEventListener("input", (e) => {
  context.lineWidth = e.target.value;
});

这段代码允许用户使用范围输入框来调整画笔大小。

✨ 查看解决方案并练习

CSS 样式设置

要求：

打开 styles.css 文件。
添加 CSS 样式，使网页应用在视觉上更具吸引力。

功能：

为网页应用的元素应用基本样式。

步骤：

body {
  font-family: "Arial", sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background: linear-gradient(135deg, #57efbf, #64a8e4);
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(125deg, #67a5f5, #f3bbe0, #64a0e4, #d364e4);
  border-radius: 10px;
  padding: 10px;
}

canvas {
  background-color: #f4f0eb;
  background-size: cover;
  border: 1px solid #919396;
  box-shadow: 0 10px 20px rgba(16, 16, 16, 0.567);
}

.controls {
  margin-top: 10px;
}

label {
  font-weight: bold;
  margin-right: 5px;
  color: #fff;
}

input[type="color"],
input[type="range"] {
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4be2ed;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #dac765;
}

button:focus {
  outline: none;
}

✨ 查看解决方案并练习