创建一个绘图板网页应用程序

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

👀 预览

绘图板演示

🎯 任务

在本项目中,你将学习:

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

🏆 成果

完成本项目后,你将能够:

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("`DOM Traversal`") subgraph Lab Skills javascript/dom_select -.-> lab-445711{{"`创建一个绘图板网页应用程序`"}} javascript/dom_manip -.-> lab-445711{{"`创建一个绘图板网页应用程序`"}} javascript/event_handle -.-> lab-445711{{"`创建一个绘图板网页应用程序`"}} javascript/dom_traverse -.-> lab-445711{{"`创建一个绘图板网页应用程序`"}} end

创建 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 代码,以便在鼠标点击并移动时能够在画布上绘图。
  • mousedownmouseupmousemove 事件实现事件监听器。

功能

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

步骤

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;
}
✨ 查看解决方案并练习

运行应用程序

  • 在网页浏览器中打开 index.html
    open web
  • 通过添加费用并验证费用列表和摘要是否正确更新来测试应用程序。
  • 页面效果如下:
    app expense tracking demo
✨ 查看解决方案并练习

总结

恭喜你!你已经使用 HTML、CSS 和 JavaScript 创建了一个简单的绘图板网页应用程序。用户可以在画布上绘图、更改画笔颜色并调整画笔大小。

您可能感兴趣的其他 JavaScript 教程