HTML - Velocity Draw

Velocity Draw 的簡介

您好，未來的網頁開發者們！今天，我們將踏上一段令人興奮的旅程，進入 HTML 世界和一個非常便捷的小工具——Velocity Draw。作為你們友善的鄰居電腦老師，我將指導你們進行這次冒險，一步一步來。別擔心如果你從未寫過一行代碼——我們從頭開始！

Velocity Draw 是什麼？

Velocity Draw 是一個簡單但強大的基於 HTML5 canvas 的繪圖應用程序。它讓用戶可以通過在螢幕上移動鼠標或手指（在觸摸設備上）來創建繪圖。酷的是什麼？你移動得越快，線條就越細！

設置我們的 HTML 檔案

讓我們從為我們的 Velocity Draw 應用程序創建一個基本的 HTML 構架開始。打開你喜歡的文本編輯器並輸入以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</title>
</head>
<body>
<canvas id="drawingCanvas"></canvas>
<script>
// 我們將在這裡放置我們的 JavaScript 代碼
</script>
</body>
</html>

這樣就建立了一個基本的 HTML 文件，其中包含一個 canvas 元素，我們將在其中進行繪圖，以及一個 script 標籤，我們將在其中寫入我們的 JavaScript 代碼。

JavaScript 魔法：讓 Canvas 互動

現在，讓我們添加一些 JavaScript 來讓我們的 canvas 互動。我們將其分解成小而容易消化的部分：

1. 設置 canvas

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

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

在這裡，我們抓取我們的 canvas 元素，獲取它的 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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity Draw</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 會被不斷調用。它從最後位置繪製一條線到當前位置。
速度是根據鼠標自上次調用以來移動的距離計算的。
線條寬度與速度成反比——移動越快，線條越細。
當你釋放鼠標按鈕或將其移出 canvas 時，stopDrawing 會被調用，停止繪圖過程。

結論

恭喜你們！你們剛剛創建了自己的 Velocity Draw 應用程序。難道不覺得僅僅幾行代碼就能創造出如此互動和有趣的東西很神奇嗎？當你玩轉你的新繪圖工具時，想想看你可以如何擴展它。你可以添加顏色選項嗎？或者不同的筆刷樣式？

記住，成為一名出色的程序員的關鍵是實驗和練習。所以不要停下腳步——繼續探索，繼續編程，最重要的是，繼續享受樂趣！

方法	描述
`getElementById`	從 DOM 中通過 ID 查找元素
`getContext`	獲取 canvas 的繪圖上下文
`addEventListener`	為元素附加事件處理器
`beginPath`	在 canvas 上開始一條新路径
`moveTo`	將繪圖光標移動到指定點
`lineTo`	從當前點繪製一條線到指定點
`stroke`	使用當前的筆觸樣式渲染定義的路径
`Math.sqrt`	計算數字的平方根
`Math.pow`	將數字提升到指定冪
`Math.max`	返回零個或多個數字中的最大值

祝編程愉快，未來的網頁魔法師們！

Credits: Image by storyset