牛人jquery+html5（canvas）做的windows画图工具

注本头条号，专注做前端。

前面分享了很多前端好玩的东西，比如程序员给女朋友打造的3d相册等，下面分享一个牛人jquery+html5（canvas）做的仿早期windows画图工具，它提供了一个白板，你可以随意的画画，功能和界面简直跟windows画图一抹一样，甚至一样支持快捷键，达到了超级逼真的程度。

不得不感叹canvas的强大。

载说明：原创不易，未经授权，谢绝任何形式的转载

使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面，允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外，它还将通过解释HTML设置、JavaScript实现、用户交互和绘图功能来帮助您理解构建绘图应用的步骤。

HTML canvas标签是一个HTML元素，它提供了一个空白的绘图表面，可以使用JavaScript来渲染图形、形状和图像。绘图应用程序利用HTML5 canvas的功能，使用户能够以数字方式创建艺术作品、草图和插图。此外，使用HTML5 canvas构建的绘图应用程序允许用户与画布进行交互，捕捉鼠标移动和点击事件，实时绘制、擦除或操作元素。

HTML5画布非常适合创建绘图应用程序，原因如下：

它提供了一个动态的绘图界面，可以实时更新。
它提供了丰富的绘图API，用于创建各种绘图工具和功能。
现代网络浏览器的原生支持。
支持交互和事件处理，用于捕获用户输入。
启用动画和特效，让绘画栩栩如生。
允许图像操作，包括加载、显示和转换图像。

HTML设置

您可以使用HTML5 Canvas以以下方式为绘图应用程序设置HTML结构：

在代码编辑器中创建一个新的HTML文件或打开一个已存在的文件。
从基本的HTML结构开始，通过包含 <!DOCTYPE html> 声明，打开 <html> 标签，并添加 <head> 和 <body> 部分。
在 <head> 部分，您可以设置应用程序的标题并包含任何必要的CSS样式或外部库。
在 <body> 部分中添加一个 <canvas> 元素，它将作为应用程序的绘图表面。您可以指定所需的宽度和高度属性来定义画布的尺寸。
在 <canvas> 元素下面，您可以添加任何其他的HTML元素，以便在您的绘图应用程序中使用，比如按钮、颜色选择器或工具栏。
您可以根据需求自定义HTML结构，添加任何必要的元素、样式和ID以供绘图应用程序使用。以下是绘图应用程序的基本HTML设置示例：

<!DOCTYPE html>
<html>
<head>
 <title>Drawing Application</title>
 <style>
  body {
   margin: 3px;
   padding: 6px;
   font-size: 22px;
  }
  canvas {
   border: 2px solid black;
  }
  .toolbar button,
  #clearButton,
  #saveButton {
   padding: 15px;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <h1>HTML Setup for a Drawing Application Using HTML5 Canvas</h1>
 <canvas id="myCanvas" width="700" height="400"></canvas>
 <button id="clearButton">Clear</button>
</body>
</html>

结果：

在上面的示例中，我们通过添加带有ID为“myCanvas”的画布元素并分别指定其宽度和高度为700和400像素来构建了绘图应用程序的HTML结构。我们还在画布下方包含了一个ID为“clearButton”的“清除”按钮，为用户提供了一种方便的方式来从画布中删除所有绘制的元素，并为新的绘图创建一个空白画布。

绘图应用的样式设计

添加一些元素和功能，使用额外的HTML和CSS使绘图应用程序看起来更像一个应用程序。例如，您可以添加一个工具栏、一个颜色调色板、一个画笔大小和一个状态栏。以下是一个示例，其中包含一些额外的元素，以增强绘图应用程序的外观和布局：

<div class="toolbar">
 <button id="pencilTool">Pencil</button>
 <button id="brushTool">Brush</button>
 <button id="eraserTool">Eraser</button>
 <input type="color" id="colorPicker" />
 <select id="brushSize">
  <option value="1">1px</option>
  <option value="3">3px</option>
  <option value="5">5px</option>
 </select>
</div>
<div class="color-palette">
 <div class="color-swatch" style="background-color: black"></div>
 <div class="color-swatch" style="background-color: red"></div>
 <div class="color-swatch" style="background-color: green"></div>
 <div class="color-swatch" style="background-color: blue"></div>
</div>

使用CSS进行样式设置：

.toolbar {
 margin-bottom: 12px;
}
.toolbar button {
 padding: 10px;
 margin-right: 7px;
 background: white;
 color: black;
 border: none;
 cursor: pointer;
}
.color-palette {
 display: flex;
 justify-content: center;
 margin-bottom: 12px;
}
.color-palette .color-swatch {
 width: 32px;
 height: 32px;
 border: 3px solid white;
 cursor: pointer;
 margin-right: 6px;
}
.status-bar {
 padding: 7px;
 background: white;
 color: black;
}

结果：

上面的例子包括了创建绘图应用所需的结构和样式，包括工具栏（带有不同工具的按钮，如铅笔、画笔、橡皮擦）、颜色调色板、画笔大小选择下拉菜单、绘图画布、状态栏和清除按钮。您可以根据所需的功能自定义这些元素。

JavaScript 设置

没有JavaScript功能，上述示例中的按钮、颜色样本和清除按钮将不会执行任何操作。要使用绘图应用程序，您必须添加相应的JavaScript源代码来处理功能和与画布元素的交互。以下是您可以使用JavaScript处理画布元素功能和交互的几种方式：

你需要使用canvas元素的ID在JavaScript中访问它，并获取绘图上下文。绘图上下文提供了在canvas上绘制的方法。
要做到这一点，请在 <script> 标签内添加以下JavaScript代码：

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

为了启用绘图功能，您必须处理用户交互，如鼠标点击和移动。
将事件监听器附加到画布元素以捕获 mousedown 、 mousemove 、 mouseup 和 mouseout 事件。
使用 mousedown 事件开始绘制，使用 mousemove 事件在鼠标移动时绘制，使用 mouseup 事件在释放鼠标按钮时停止绘制，使用 mouseout 事件在光标移出画布时停止绘制。
要实现绘图的事件处理函数，请使用 startDrawing 、 last position 和 stopDrawing 。
startDrawing 设置绘图标志并保存起始位置， draw 根据鼠标移动从上一位置到当前位置绘制线条， stopDrawing 重置绘图标志。
要初始化变量以跟踪绘图状态，请使用 isDrawing 、 lastX 和 lastY 。它们可以跟踪绘图状态和光标或指针的先前坐标。
变量 isDrawing 是一个布尔标志，指示用户当前是否正在绘制，而 lastX 和 lastY 存储光标或指针的先前坐标，使得可以在画布上绘制平滑且连续的线条。以下是如何使用JavaScript来改进绘图应用程序的示例：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let isDrawing = false;
let selectedTool = "pencil";
function startDrawing(event) {
 isDrawing = true;
 draw(event);
}
function draw(event) {
 if (!isDrawing) return;
 const x = event.clientX - canvas.offsetLeft;
 const y = event.clientY - canvas.offsetTop;
 ctx.lineTo(x, y);
 ctx.stroke();
}
function stopDrawing() {
 isDrawing = false;
 ctx.beginPath();
}
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
const clearButton = document.getElementById("clearButton");
clearButton.addEventListener("click", function() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
});
const colorSwatches = document.querySelectorAll(".color-swatch");
colorSwatches.forEach((swatch) => {
 swatch.addEventListener("click", function() {
  const color = this.style.backgroundColor;
  ctx.strokeStyle = color;
 });
});
const brushSizeSelect = document.getElementById("brushSize");
brushSizeSelect.addEventListener("change", function() {
 const brushSize = this.value;
 ctx.lineWidth = brushSize;
});
const pencilToolButton = document.getElementById("pencilTool");
pencilToolButton.addEventListener("mousedown", function() {
 selectedTool = "pencil";
 ctx.globalCompositeOperation = "source-over";
});
const brushToolButton = document.getElementById("brushTool");
brushToolButton.addEventListener("mousedown", function() {
 selectedTool = "brush";
 ctx.globalCompositeOperation = "multiply";
});
const eraserToolButton = document.getElementById("eraserTool");
eraserToolButton.addEventListener("mousedown", function() {
 selectedTool = "eraser";
 ctx.globalCompositeOperation = "destination-out";
});
const colorPicker = document.getElementById("colorPicker");
colorPicker.addEventListener("input", function() {
 const color = this.value;
 ctx.strokeStyle = color;
});

结果：

在上面的示例中，绘图应用程序的功能被激活，您可以轻松地使用它来绘制您想要的内容。请注意，现在所有的元素都在正常工作，您可以在画布上绘制，选择不同的绘图工具（铅笔、画笔、橡皮擦），选择颜色，调整画笔大小，并清除画布。

JavaScript代码指定了HTML文档中的画布元素，获取了2D绘图上下文，并在HTML文档的各个元素上设置了事件监听器，例如画布、按钮、颜色样本和输入字段。这些事件监听器响应用户的鼠标点击、移动和值变化等操作。当触发时，相应的JavaScript函数根据用户的操作修改画布绘图上下文（ctx）。

它从HTML文档中选择清除按钮并添加一个点击事件监听器。当点击时，它使用2D绘图上下文的clearRect方法清除整个画布。例如，当您在画布上点击并拖动鼠标时，将调用 startDrawing 、 draw 和 stopDrawing 函数，这些函数跟踪鼠标坐标并在画布上绘制线条。

绘图应用的相关应用

一款绘图应用程序允许您使用上述工具和功能创建数字艺术作品。它为用户提供了一个画布，可以绘制、绘画和应用不同的效果，以创建视觉组合。绘图应用程序被艺术家、设计师、爱好者和任何对通过创建视觉吸引人的插图、绘画、素描和其他数字艺术形式来表达创造力感兴趣的人使用。

如何将HTML5画布绘制保存为图像文件

将HTML5画布绘制保存为图像文件可帮助您与他人分享绘画或在其他应用程序中使用。用户可以将绘画存储在本地设备上，或通过提供将其保存为图像文件的选项，将其上传到各种平台，如社交媒体、网站或在线画廊。

此外，保存绘画使用户能够稍后重新访问和展示他们的创作，增强了绘画应用程序的可用性和价值。以下是如何将HTML5画布绘制保存为图像文件的方法：使用JavaScript，您可以将画布绘制保存为图像文件。使用画布元素的 toDataURL() 方法。该方法将画布内容转换为数据URL，可用于创建图像文件。例如：

<button id="saveButton">Save</button>

const canvas = document.getElementById('myCanvas');
const link = document.createElement('a');
function saveCanvasAsImage() {
 const dataURL = canvas.toDataURL('image/png');
 link.href = dataURL;
 link.download = 'drawing.png';
 link.click();
}
saveCanvasAsImage();

在上面的示例中，添加了一个具有id“saveButton”的新按钮元素，并添加了一个点击事件监听器。当您点击“保存”按钮时，它会触发一个函数，该函数使用 toDataURL() 来检索画布的数据URL。然后，它创建一个动态生成的链接元素，将数据URL设置为href属性，并使用download属性指定所需的文件名为“drawing.png”，以启动图像文件下载。

如何以不同格式保存绘图

该方法支持不同的图像格式，如PNG、JPEG和GIF。您可以通过修改所需文件的类型（例如JPEG格式的'image/jpeg'）来更改格式。保存后，您可以通过电子邮件、消息应用程序或社交媒体平台分享图像文件。

结束

利用HTML5画布的绘图应用为艺术家、设计师、教育工作者和所有具有创造力的人打开了无限的可能性。无论是作为独立工具还是集成到其他应用程序中，绘图应用都赋予用户表达创造力、与他人分享作品和探索视觉表达的新领域的能力。凭借其丰富的功能，绘图应用在艺术创作中继续激发和取悦用户。所以拿起你的数字画笔，在可能性的画布上尽情释放你的想象力吧！

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

近想做一个轻巧的在线画册和海报设计工具，最近发布的 LeaferUI 特别适合这样的场景。

LeaferUI 是什么？

Leafer UI 是基于 LeaferJS 开发的一套绚丽多彩的 UI 绘图框架，帮助开发者快速生成图形界面。LeaferJS 是一个基于 HTML5 Canvas 开发的 2D 绘图渲染引擎，在 web 上绘图性能非常出众，和同类图形引擎相比，渲染耗时少、占用内存超低。

LeaferUI 官网

作为一款国产的绘图引擎，LeaferJS 的愿景不小：

我们致力于通过 LeaferJS 实现一套简洁、开放、现代化的 UI 绘图语言标准，为数字化产品开发提供跨平台、轻量化、高性能的运行时。我们希望不同的软件之间能够沟通、协作、共享绘图数据与数字界面，通过不断革新的图形技术和配套支持，吸引更多的开发者加入使用，建立起一个开放的生态环境，沟通有无，以推动行业的快速发展，并诞生出更多有创意的技术和产品。
— LeaferJS 的使命和愿景

Leafer UI 提供了常用的 UI 绘图组件和开箱即用的功能，使得我们可以很方便地与 Figma、Sketch 等产品进行数据交换，并为跨平台开发提供了统一、丰富的交互事件，如拖拽、旋转、缩放手势等。

LeaferUI 组件预览

Leafer UI 的技术特性

易学易用：基于Javascript、Canvas API构建，提供容易上手的API和文档；
简洁、开放、现代化的 UI 绘图框架，并提供跨平台、轻量化、高性能的运行时；
丰富的图形表现，能够实现各种绚丽多彩的效果，可媲美当前主流的设计软件；
性能优秀，创建 100 万个可交互的矩形，首屏渲染最快仅需 1.5 秒。比同类引擎快 10 倍左右；
内存占用低，创建 100 万个可交互的矩形，仅占用 350M 内存。比同类引擎节省 10 倍以上内存；
支持 web 端和 node.js 服务端，马上就支持小程序端了，这也是我希望的需求，非常期待

我用 LeaferUI 来做什么？

最近有一个需求，是要做一个在线设计海报画册的小程序，用户可以通过一些预先做好的设计模板，只需要替换图片和文案，就可以快速做出审美在线、风格大气的画册和海报。前期技术评估时，调研了解相关的技术，期间发现了 LeaferJS 这个 2D 绘图引擎，刚好能满足需求。

LeaferUI 组件预览

开发上手

安装 Leafer UI

npm install leafer-ui

也可以直接在<script>引入

<script src="https://unpkg.com/leafer-ui"></script>

简单的使用示例

<!DOCTYPE html>
<html>
  <head>
    <title>Demo | Leafer UI</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="https://unpkg.com/leafer-ui"></script>
  </head>

  <body></body>

  <script>
    var Leafer = LeaferUI.Leafer
    var Rect = LeaferUI.Rect

    var leafer = new Leafer({ view: window })

    var rect = new Rect({
      x: 100,
      y: 100,
      width: 200,
      height: 200,
      fill: '#32cd79',
      draggable: true,
    })

    leafer.add(rect)
  </script>
</html>

这样就能跑起来了。LeaferUI 很像游戏引擎，内置了一些绘图的 api 可以很方便地调用，比如绘制各种矩形、圆形、扇形，以及各种常见的多边形，当然基本的图片和文字，也都能渲染。另外还有容器、渐变、线条等api，有了这些 api，我就可以很容易构建一个简约的用户设计操作界面，根据设计模板来实现合成画册或者海报的功能了。

LeaferUI 组件预览

除了构建界面，用户的操作也是必不可少的，LeaferUI 提供了用户点击、拖拽、滑动、放大缩小等事件，处理起来很省事。目前 LeaferUI 很多 api 已经很完善了，很值得去尝试。

完善的文档

LeaferUI 提供很容易上手学习的使用文档，每个重要功能都有详细的代码示例和示例效果。感兴趣的开发者可以前往官网阅读。

免费开源说明

Leafer UI 是一个免费开源的 JavaScript 项目，采用 MIT 许可，我们可以免费下载来使用，也可以放心用于商业项目。

关注我，持续分享高质量的免费开源、免费商用的资源。

↓↓点击查看本次分享的网址。

LeaferUI - 性能强悍、简洁轻量的 HTML5 Canvas 2D 图形 UI 绘图框架，用于 web 端在线图形设计、图表、白板、数据可视化等场景｜那些免费的砖

在线咨询

上一篇：把HTML网页下载为单文件，可离线访问
下一篇：5个范例告诉你：什么是自适应网页设计

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

牛人jquery+html5（canvas）做的windows画图工具

HTML设置

绘图应用的样式设计

JavaScript 设置

绘图应用的相关应用

如何将HTML5画布绘制保存为图像文件

如何以不同格式保存绘图

结束

LeaferUI 是什么？

Leafer UI 的技术特性

我用 LeaferUI 来做什么？

开发上手

完善的文档

免费开源说明

您的项目需求