LabEx
ログイン登録

ドローイングボードのウェブアプリを作成する

JavaScriptBeginner
オンラインで実践に進む

はじめに

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

👀 プレビュー

drawing board demo

🎯 タスク

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

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

🏆 成果

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

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

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 を開きます。 open web
  • 費用を追加し、費用リストと集計が正しく更新されることを確認することでアプリケーションをテストします。
  • ページの表示は以下の通りです。 app expense tracking demo

まとめ

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

✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習✨ 解答を確認して練習
関連 JavaScript コース
初心者向け JavaScript

初心者向け JavaScript

javascriptweb-development
三目並べウェブアプリを作成する

三目並べウェブアプリを作成する

javascriptweb-development
モグラたたき Web ゲームの作成

モグラたたき Web ゲームの作成

javascriptweb-development