Créer une application web de tableau de dessin avec HTML5 Canvas

Introduction

Dans ce projet, nous allons créer une application de tableau de dessin basée sur le web étape par étape. Chaque étape se construira sur la précédente, vous permettant d'ajouter progressivement des fonctionnalités à l'application. À la fin de ce projet, vous aurez un tableau de dessin entièrement fonctionnel où les utilisateurs pourront dessiner, changer la couleur de la brosse, ajuster la taille de la brosse et effacer le canevas.

👀 Aperçu

drawing board demo

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer la structure HTML pour une application web de tableau de dessin.
Comment créer et obtenir le contexte de rendu 2D d'un élément HTML <canvas>.
Comment implémenter des écouteurs d'événements pour suivre les actions de la souris pour le dessin.
Comment ajouter un bouton "Effacer" et implémenter la fonctionnalité pour effacer le canevas.
Comment créer une entrée de sélection de couleur et implémenter la fonctionnalité pour changer la couleur de la brosse.
Comment ajouter une entrée de plage pour ajuster la taille de la brosse et implémenter la fonctionnalité.

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Créer une structure de page web de base à l'aide d'HTML.
Utiliser des écouteurs d'événements JavaScript pour gérer les interactions de l'utilisateur.
Travailler avec des éléments HTML <canvas> pour dessiner.
Styliser une application web à l'aide de CSS.
Combiner HTML, CSS et JavaScript pour construire un tableau de dessin fonctionnel.

Créer la structure HTML

Exigences :

Ouvrez le fichier index.html.
Configurez la structure HTML de base dans index.html avec un canevas, un en-tête et des éléments de contrôle.

Fonctionnalité :

Les fichiers du projet et la structure HTML de base seront créés, mais il n'y aura pas encore de fonctionnalité de dessin.

Étapes :

<!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">Taille de la brosse :</label>
        <input type="range" id="brush-size" min="1" max="20" value="5" />
        <button id="clear-btn">Effacer</button>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

Ajout du canevas

Exigences :

Dans index.html, ajoutez un élément <canvas> avec un ID de "whiteboard" et des dimensions (largeur et hauteur) de votre choix.

Fonctionnalité :

Le canevas sera ajouté à la page web, mais il n'aura pas de capacité de dessin.

Étapes :

<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">Taille de la brosse :</label>
      <input type="range" id="brush-size" min="1" max="20" value="5" />
      <button id="clear-btn">Effacer</button>
    </div>
  </div>
  <script src="script.js"></script>
</body>

Ajout de la fonctionnalité de dessin

Exigences :

Dans script.js, ajoutez du code JavaScript pour permettre le dessin sur le canevas lorsque la souris est cliquée et déplacée.
Implémentez des écouteurs d'événements pour les événements mousedown, mouseup et mousemove.

Fonctionnalité :

Les utilisateurs peuvent désormais dessiner sur le canevas à l'aide de la souris.

Étapes :

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
  );
}

Ce code permet le dessin sur le canevas lorsque la souris est cliquée et déplacée.

Ajout de la fonctionnalité de nettoyage

Exigences :

Dans script.js, ajoutez du code JavaScript pour effacer le canevas lorsqu'un bouton "Effacer" est cliqué.
Créez un bouton dans index.html avec un ID de "clear-btn".

Fonctionnalité :

Les utilisateurs peuvent effacer le canevas pour commencer un nouveau dessin.

Étapes :

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

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

Ce code permet aux utilisateurs d'effacer le canevas en cliquant sur le bouton "Effacer".

Ajout du contrôle de la couleur du pinceau

Exigences :

Dans script.js, ajoutez du code JavaScript pour permettre aux utilisateurs de sélectionner une couleur de brosse à l'aide d'un élément <input type="color">.
Créez l'input de sélection de couleur dans index.html avec un ID de "color-picker".

Fonctionnalité :

Les utilisateurs peuvent choisir une couleur pour leur brosse.

Étapes :

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

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

Ce code permet aux utilisateurs de sélectionner une couleur de brosse à l'aide du sélecteur de couleur.

Ajout du contrôle de la taille du pinceau

Exigences :

Dans script.js, ajoutez du code JavaScript pour permettre aux utilisateurs de régler la taille de la brosse à l'aide d'un élément <input type="range">.
Créez l'entrée de plage dans index.html avec un ID de "brush-size".

Fonctionnalité :

Les utilisateurs peuvent changer la taille de la brosse pour tracer des traits plus épais ou plus fins.

Étapes :

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

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

Ce code permet à l'utilisateur de régler la taille de la brosse à l'aide de l'entrée de plage.

Mise en forme CSS

Exigences :

Ouvrez le fichier styles.css.
Ajoutez des styles CSS pour rendre l'application web visuellement attrayante.

Fonctionnalité :

Appliquez des styles de base aux éléments de l'application web.

Étapes :

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;
}

Exécution de l'application

Ouvrez index.html dans un navigateur web.
Testez l'application en ajoutant des dépenses et en vérifiant que la liste et le résumé des dépenses sont mis à jour correctement.
L'effet de la page est le suivant :

Résumé

Félicitations! Vous avez créé une application web de tableau de dessin simple à l'aide de HTML, CSS et JavaScript. Les utilisateurs peuvent dessiner sur le canevas, changer la couleur de la brosse et régler la taille de la brosse.