HTML5 キャンバスを使ってドローイングボードのウェブアプリを作成する

はじめに

このプロジェクトでは、簡単なウェブベースのドローイングボードアプリケーションを段階的に作成します。各ステップは前のステップをベースに構築され、アプリケーションに機能を徐々に追加できます。このプロジェクトが終了すると、ユーザーが描画、ブラシの色を変更、ブラシのサイズを調整、キャンバスをクリアできる完全に機能するドローイングボードが完成します。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

ドローイングボードウェブアプリケーションのHTML構造を設定する方法。
HTML <canvas> 要素の2Dレンダリングコンテキストを作成し取得する方法。
描画用のマウスアクションを追跡するためのイベントリスナーを実装する方法。
"クリア" ボタンを追加し、キャンバスをクリアする機能を実装する方法。
色ピッカー入力を作成し、ブラシの色を変更する機能を実装する方法。
ブラシのサイズを調整するためのレンジ入力を追加し、機能を実装する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

HTMLを使用して基本的なウェブページ構造を作成する。
JavaScriptイベントリスナーを使用してユーザーインタラクションを処理する。
HTML <canvas> 要素を使用して描画する。
CSSを使用してウェブアプリケーションをスタイリッシュにする。
HTML、CSS、JavaScriptを組み合わせて機能するドローイングボードを構築する。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/dom_select -.-> lab-445711{{"ドローイングボードのウェブアプリを作成する"}} javascript/dom_manip -.-> lab-445711{{"ドローイングボードのウェブアプリを作成する"}} javascript/event_handle -.-> lab-445711{{"ドローイングボードのウェブアプリを作成する"}} javascript/dom_traverse -.-> lab-445711{{"ドローイングボードのウェブアプリを作成する"}} end

HTML構造を作成する

要件:

index.html ファイルを開きます。
index.html にキャンバス、ヘッダー、コントロール要素を持つ基本的なHTML構造を設定します。

機能:

プロジェクトファイルと基本的なHTML構造が作成されますが、まだ描画機能はありません。

手順:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Drawing Board</title>
  </head>
  <body>
    <header>
      <h1>Drawing Board</h1>
    </header>
    <div class="container">
      <div class="controls">
        <input type="color" id="color-picker" value="#000000" />
        <label for="brush-size">Brush Size:</label>
        <input type="range" id="brush-size" min="1" max="20" value="5" />
        <button id="clear-btn">Clear</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

✨ 解答を確認して練習

キャンバスの追加

要件:

index.html にIDが "whiteboard" で、任意のサイズ（幅と高さ）の <canvas> 要素を追加します。

機能:

キャンバスがウェブページに追加されますが、描画機能はありません。

手順:

<body>
  <header>
    <h1>Drawing Board</h1>
  </header>
  <div class="container">
    <!--add canvas-->
    <canvas id="whiteboard" width="800" height="400"></canvas>
    <div class="controls">
      <input type="color" id="color-picker" value="#000000" />
      <label for="brush-size">Brush Size:</label>
      <input type="range" id="brush-size" min="1" max="20" value="5" />
      <button id="clear-btn">Clear</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

✨ 解答を確認して練習

描画機能の追加

要件:

script.js に、マウスがクリックされて移動したときにキャンバスで描画できるようにするJavaScriptコードを追加します。
mousedown、mouseup、および mousemove イベントのイベントリスナーを実装します。

機能:

ユーザーは現在、マウスを使ってキャンバス上で描画できます。

手順:

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

let drawing = false;

canvas.addEventListener("mousedown", () => {
  drawing = true;
  context.beginPath();
});

canvas.addEventListener("mouseup", () => {
  drawing = false;
  context.closePath();
});

canvas.addEventListener("mousemove", draw);

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

  context.lineCap = "round";

  context.lineTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
  context.stroke();
  context.beginPath();
  context.moveTo(
    e.clientX - canvas.getBoundingClientRect().left,
    e.clientY - canvas.getBoundingClientRect().top
  );
}

このコードは、マウスがクリックされて移動したときにキャンバス上で描画できるようにします。

✨ 解答を確認して練習

クリア機能の追加

要件:

script.js に、「クリア」ボタンがクリックされたときにキャンバスをクリアするJavaScriptコードを追加します。
index.html にIDが "clear-btn" のボタンを作成します。

機能:

ユーザーはキャンバスをクリアして新しい描画を始めることができます。

手順:

const clearButton = document.getElementById("clear-btn");

clearButton.addEventListener("click", () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
});

このコードは、「クリア」ボタンをクリックすることでユーザーがキャンバスをクリアできるようにします。

✨ 解答を確認して練習

ブラシの色の制御の追加

要件:

script.js に、<input type="color"> 要素を使ってユーザーがブラシの色を選択できるようにするJavaScriptコードを追加します。
index.html にIDが "color-picker" の色選択ボックスを作成します。

機能:

ユーザーはブラシの色を選ぶことができます。

手順:

const colorPicker = document.getElementById("color-picker");

colorPicker.addEventListener("input", (e) => {
  context.strokeStyle = e.target.value;
});

このコードは、色選択ボックスを使ってユーザーがブラシの色を選択できるようにします。

✨ 解答を確認して練習

ブラシサイズの制御の追加

要件:

script.js に、<input type="range"> 要素を使ってユーザーがブラシサイズを調整できるようにするJavaScriptコードを追加します。
index.html にIDが "brush-size" のレンジ入力を作成します。

機能:

ユーザーはブラシサイズを変更して、太いまたは細い線を描くことができます。

手順:

const brushSizeInput = document.getElementById("brush-size");

brushSizeInput.addEventListener("input", (e) => {
  context.lineWidth = e.target.value;
});

このコードは、レンジ入力を使ってユーザーがブラシサイズを調整できるようにします。

✨ 解答を確認して練習

CSS スタイリング

要件:

styles.css ファイルを開きます。
ウェブアプリを視覚的に魅力的にするための CSS スタイルを追加します。

機能:

ウェブアプリの要素に基本的なスタイルを適用します。

手順:

body {
  font-family: "Arial", sans-serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

header {
  background: linear-gradient(135deg, #57efbf, #64a8e4);
  color: #fff;
  text-align: center;
  padding: 20px 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  background: linear-gradient(125deg, #67a5f5, #f3bbe0, #64a0e4, #d364e4);
  border-radius: 10px;
  padding: 10px;
}

canvas {
  background-color: #f4f0eb;
  background-size: cover;
  border: 1px solid #919396;
  box-shadow: 0 10px 20px rgba(16, 16, 16, 0.567);
}

.controls {
  margin-top: 10px;
}

label {
  font-weight: bold;
  margin-right: 5px;
  color: #fff;
}

input[type="color"],
input[type="range"] {
  margin-right: 10px;
}

button {
  padding: 10px 20px;
  background-color: #4be2ed;
  color: #fff;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #dac765;
}

button:focus {
  outline: none;
}

✨ 解答を確認して練習

アプリケーションの実行

ウェブブラウザで index.html を開きます。
費用を追加し、費用リストと集計が正しく更新されることを確認することでアプリケーションをテストします。
ページの表示は以下の通りです。

✨ 解答を確認して練習

まとめ

おめでとうございます！HTML、CSS、JavaScriptを使って、シンプルなドローイングボードのウェブアプリケーションを作成しました。ユーザーはキャンバス上で描き、ブラシの色を変更し、ブラシサイズを調整することができます。