构建 Web Paint 应用程序

打造一个从小就使用的东西有多令人兴奋？

我敢肯定，你们大多数人都用过微软画图软件。画完一幅有山、有小屋、有树、有两只飞鸟的风景画后，我们是不是感觉自己像毕加索一样？我们就是这样的！

这个项目与它类似，或者至少理念相似。即使您是 Web 开发的初学者，也可以创建这个项目。本教程重点介绍如何构建这个项目，而不是 HTML、CSS 或 JavaScript。它也不是<canvas>教程。

先决条件

对 HTML 和 CSS 有基本的了解
DOM 操作

您将要建造什么？

一个使用 HTML5、CSS 和 JavaScript 构建的 Web 应用程序。本教程面向初学者。您可以绘制线条、更改描边的颜色和大小、擦除以及自定义颜色。

让我们深入研究一下吧！⚡

Canvas介绍

HTML5提供了一个元素<canvas> </canvas>，用于通过脚本在网页上绘制图形。它的默认尺寸为 300px × 150px。我们将使用 JavaScript 上下文对象在画布上绘制图形。它可以具有属性、ID、类等。

将其视为<canvas>实际的画布，将 JavaScript 上下文对象视为颜料，将自己视为艺术家🎨。

在开始项目之前，您可以先自己尝试一下。实时项目

<canvas id="canvas">Fallback text</canvas>

注意：以下浏览器支持 Canvas

Chrome 102 和 103
Firefox 101 和 102
Edge 101 和 102
Safari 14 和 15

💻 终于到了开始写代码的时候了。
为了节省你创建应用 UI 的时间，我创建了启动文件，你可以在这里下载。

起始代码：GitHub Repo 链接

橡皮

如果您选择画布为特定颜色，则可以通过创建与画布颜色相同的画笔来制作橡皮擦。这虽然有效，但效率不高。橡皮擦的目的是从指定的区域/区域擦除像素，这正是我们将要做的。
我们可以使用globalCompositeOperationContext API 的属性来完成预期的任务。

const erase = () => (ctx.globalCompositeOperation = "destination-out");

切换画笔大小下拉菜单

function sizeList() {
  document.querySelector(".size-list").classList.toggle("show-list");
}

设置画笔大小

要将所选尺寸设置为画笔尺寸，请为列表中的每个尺寸添加事件监听器。如果用户点击任何指定的尺寸，则更改存储画笔粗细的全局变量的值。

确保brushSize()在画笔大小下拉菜单上调用该函数。

function brushSize() {
  var brushSet = document.getElementsByClassName("size");
  Array.prototype.forEach.call(brushSet, function (element) {
    element.addEventListener("click", function () {
      brushthickness = element.getAttribute("style").substr(11, 2);
    });
  });
}

设置颜色

当我们更改颜色时，用户很难记住所选的颜色。因此，如果我们像微软画图工具一样，在方框中指示当前活动颜色，用户体验会更好。
这很简单，因为我们只需要更改方框的背景，并将描边的值设置为存储活动颜色的全局变量即可。我们将了解如何以及在何处操作这个变量。

function setActiveColor() {
  document.querySelector(".color-btn div").style.backgroundColor = color;
  ctx.strokeStyle = color;
  ctx.globalCompositeOperation = "source-over";
}

调色板由导航栏中的小块创建，要选中它并将其设置为描边颜色，我们需要为每个块添加点击事件监听器。一旦点击了某个块，就将全局颜色变量设置为样式的属性值。完成后，我们就可以调用我们的setActiveColor()函数了。

function setColor() {
  var palette = document.getElementsByClassName("color");
  Array.prototype.forEach.call(palette, function (element) {
    element.addEventListener("click", function () {
      color = element.getAttribute("style").split("--set-color:")[1];
      setActiveColor();
    });
  });
}

在这个主题下，我们需要做的最后一件事是让颜色选择器工作，即获取将其设置为全局变量的值。

function colorPick() {
  color = document.getElementById("color-picker").value;
  setActiveColor();
}

绘制功能

🥳这个应用程序的核心终于来了，我们现在将专注于创建在画布上绘制元素的功能。在画布上绘图有专门的步骤：

开始绘制路径。
当鼠标移动时不断更新线条的位置。
从起点到终点创建线条。
点燃道路。

function draw(e) {
  if (e.buttons !== 1) return; // if mouse is not clicked, do not go further

  ctx.beginPath(); // begin the drawing path
  ctx.lineWidth = brushthickness; // width of line
  ctx.lineCap = "round"; // rounded end cap
  ctx.strokeStyle = color; // hex color of line
  ctx.moveTo(pos.x, pos.y); // from position
  setPosition(e);
  ctx.lineTo(pos.x, pos.y); // to position
  ctx.closePath();
  ctx.stroke(); // draw it!
}

这样，您自己的网络绘画应用程序就准备好了，与您的朋友分享并享受乐趣吧！

希望你有所收获！继续创作！

文章来源：https://dev.to/anshika_gautam_/build-a-web-paint-application-5f55