HTML - ベLOCITY ドラフト

ベLOCITY ドラフトの導入

こんにちは、未来のウェブ開発者たち！今日は、HTMLと便利な小さなツールであるベLOCITY ドラフトの世界に踏み出します。あなたの近所の親切なコンピュータ教師として、私はこの冒険をステップバイステップでガイドします。コードを書いたことがない人も心配しないでください - 我们从零开始！

HTML - Velocity Draw

ベLOCITY ドラフトとは？

ベLOCITY ドラフトは、シンプルで強力なHTML5キャンバスベースの描画アプリケーションです。ユーザーはマウスやタッチデバイス上的指を屏幕に動かすことで描画を行うことができます。面白い部分は、動かす速度が速いほど線が細くなることです！

HTMLファイルの設定

まず、ベLOCITY ドラフトアプリケーションのための基本的なHTML構造を作成しましょう。お気に入りのテキストエディタを開き、以下のコードを入力してください：

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ベLOCITY ドラフト</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="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ベLOCITY ドラフト</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が呼ばれ、描画プロセスが停止します。

結論

おめでとうございます！あなたは刚刚自分のベLOCITY ドラフトアプリケーションを作成しました。これほどインタラクティブで楽しいものが数行のコードで作れるなんて驚きですね！新しい描画ツールで遊びながら、色のオプションを追加することや、 khácなるブラシスタイルを考えしてみてください。

忘れないでください、素晴らしいプログラマーになる鍵は実験と練習です。ここで止まらず、探求を続け、そして最も重要なのは、楽しむことです！

メソッド	説明
`getElementById`	DOMからIDで要素を取得
`getContext`	キャンバスのレンダリングコンテキストを取得
`addEventListener`	要素にイベントハンドラを追加
`beginPath`	キャンバスで新しいパスを開始
`moveTo`	描画カーソルを指定された点に移動
`lineTo`	現在の点から指定された点まで線を描画
`stroke`	定義されたパスを現在のストロークスタイルでレンダリング
`Math.sqrt`	数値の平方根を計算
`Math.pow`	数値を指定されたパワに乗算
`Math.max`	0個以上の数値の中で最大値を返す

未来のウェブ魔法使いたち、楽しいコーディングを！

Credits: Image by storyset