HTML - 速度绘图

速度绘图简介

你好，未来的网页开发者们！今天，我们将踏上一段激动人心的旅程，探索HTML世界和一个小巧的工具——速度绘图（Velocity Draw）。作为你友好的邻居计算机老师，我将引导你一步一步地完成这次冒险。别担心如果你之前从未写过一行代码——我们将从头开始！

HTML - Velocity Draw

速度绘图是什么？

速度绘图是一个简单但强大的基于HTML5画布的绘图应用程序。它允许用户通过在屏幕上移动鼠标或手指（在触摸设备上）来创建绘图。酷炫的部分？你移动得越快，线条就越细！

设置我们的HTML文件

让我们开始为我们的速度绘图应用程序创建一个基本的HTML结构。打开你最喜欢的文本编辑器，并输入以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>速度绘图</title>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
// 我们将在这里放置我们的JavaScript代码
</script>
</body>
</html>

这设置了一个基本的HTML文档，其中包含一个画布元素，我们将在其中进行绘图，以及一个脚本标签，我们将在其中编写JavaScript代码。

JavaScript魔法：使画布互动

现在，让我们添加一些JavaScript代码，使我们的画布具有互动性。我们将把它分解成小而易于消化的部分：

1. 设置画布

const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

在这里，我们获取画布元素，获取它的2D渲染上下文（我们将用它来绘图），并将它的大小设置为填满整个窗口。

2. 跟踪鼠标移动

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

我们设置了一些变量来跟踪我们是否在绘图，鼠标的最后位置，以及当前的速率。然后我们为鼠标操作添加事件监听器。

3. 实现绘图函数

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

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

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}

这些函数处理实际的绘图。draw函数是魔法发生的地方——它根据鼠标移动的距离计算速度，并相应调整线宽。

把所有东西放在一起

现在我们有了所有的部分，让我们将它们组合到我们的HTML文件中：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>速度绘图</title>
<style>
body { margin: 0; overflow: hidden; }
canvas { display: block; }
</style>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
const canvas = document.getElementById('drawingCanvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let velocity = 0;

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);
canvas.addEventListener('mouseout', stopDrawing);

function startDrawing(e) {
isDrawing = true;
[lastX, lastY] = [e.offsetX, e.offsetY];
}

function stopDrawing() {
isDrawing = false;
}

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

ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);

const currentVelocity = Math.sqrt(
Math.pow(e.offsetX - lastX, 2) + Math.pow(e.offsetY - lastY, 2)
);
velocity = 0.7 * velocity + 0.3 * currentVelocity;

ctx.lineWidth = Math.max(1, 10 - velocity);
ctx.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
}
</script>
</body>
</html>

它是如何工作的

当你按下鼠标按钮时，startDrawing会被调用，它将isDrawing设置为true并记录起始位置。
当你移动鼠标时，draw会不断地被调用。它从最后的位置画一条线到当前位置。
速度是基于鼠标自上次调用以来移动的距离计算的。
线宽与速度成反比——移动得越快，线条就越细。
当你释放鼠标按钮或将它移出画布时，stopDrawing会被调用，它停止绘图过程。

结论

恭喜你！你刚刚创建了自己的速度绘图应用程序。是不是很神奇，几行代码就能创造出如此互动和有趣的东西？当你玩转你的新绘图工具时，想想你如何扩展它。你能添加颜色选项吗？不同的笔刷样式呢？

记住，成为伟大程序员的钥匙是实验和实践。所以不要停在这里——继续探索，继续编码，最重要的是，继续享受乐趣！

方法	描述
`getElementById`	通过ID从DOM中检索元素
`getContext`	获取画布的渲染上下文
`addEventListener`	将事件处理程序附加到元素
`beginPath`	在画布上开始新路径
`moveTo`	将绘图光标移动到指定的点
`lineTo`	从当前位置画一条线到指定的点
`stroke`	使用当前的笔触样式渲染定义的路径
`Math.sqrt`	计算一个数的平方根
`Math.pow`	将一个数提升到指定的幂
`Math.max`	返回零个或多个数字中的最大值

Credits: Image by storyset