在现代科技日益发达的时代，传统的白板被电子白板所取代。电子白板是一种集电脑、投影仪、触摸屏和软件于一体的装置，具备更强大的功能和更灵活的操作。本篇博客将介绍如何使用JavaScript实现一个简单的电子白板。
准备工作
首先，我们需要创建一个HTML文件，并引入必要的JavaScript和CSS文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>电子白板</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="board"></canvas>
<script src="script.js"></script>
</body>
</html>
在这个HTML文件中，我们使用了一个<canvas>元素来作为我们的电子白板的画布。然后，我们分别创建了一个用来设置白板样式的CSS文件和一个用来实现白板逻辑的JavaScript文件。
实现白板功能
接下来，我们将在script.js文件中编写JavaScript代码来实现电子白板的功能。
首先，我们需要获取到<canvas>元素和它的2D绘图上下文：
const canvas = document.getElementById('board');
const ctx = canvas.getContext('2d');
然后，我们需要定义一些变量来存储鼠标的当前位置和上一次位置：
let isDrawing = false;
let lastX = 0;
let lastY = 0;
接着，我们可以开始监听鼠标事件，来实现画板的绘制功能：
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);
在startDrawing函数中，我们将isDrawing设置为true，并更新鼠标的当前位置：
function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}
接下来，在draw函数中，我们需要判断isDrawing是否为true，如果是，则更新鼠标的当前位置，并使用绘图上下文的方法绘制线条：
function draw(e) {
if (!isDrawing) return; // 如果没有开始绘制，则直接返回
ctx.strokeStyle = '#000'; // 设置线条颜色
ctx.lineWidth = 5; // 设置线条宽度
ctx.lineJoin = 'round'; // 设置线条连接样式
ctx.lineCap = 'round'; // 设置线条末端样式
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
最后，在stopDrawing函数中，我们将isDrawing设置为false，表示停止绘制：
function stopDrawing() {
isDrawing = false;
}
美化样式
为了让电子白板看起来更加美观，我们可以在style.css文件中添加一些样式：
body {
background-color: #f2f2f2;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
border: 1px solid #ccc;
cursor: crosshair;
}
通过以上样式，我们将白板居中显示，并设置了背景颜色和边框样式。
运行结果
完成以上步骤后，你可以在浏览器中运行该HTML文件，即可看到一个简单的电子白板。使用鼠标在白板上绘制，你将可以看到实时绘制的线条。
在本篇博客中，我们使用JavaScript实现了一个简单的电子白板，并通过美化样式使其更加美观。希望这篇博客能给你带来一些灵感，让你在实践中深入学习JavaScript和前端开发。
参考链接：
本文来自极简博客，作者：紫色星空下的梦，转载请注明原文链接：JavaScript实现电子白板
