Crie um Aplicativo Web de Quadro de Desenho com HTML5 Canvas

Introdução

Neste projeto, criaremos um aplicativo de quadro de desenho baseado na web simples, passo a passo. Cada etapa se baseará na anterior, permitindo que você adicione gradualmente funcionalidades ao aplicativo. Ao final deste projeto, você terá um quadro de desenho totalmente funcional onde os usuários podem desenhar, alterar a cor do pincel, ajustar o tamanho do pincel e limpar a tela.

👀 Pré-visualização

drawing board demo

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar a estrutura HTML para um aplicativo web de quadro de desenho.
Como criar e obter o contexto de renderização 2D de um elemento HTML <canvas>.
Como implementar ouvintes de eventos para rastrear ações do mouse para desenhar.
Como adicionar um botão "Limpar" e implementar a funcionalidade para limpar a tela.
Como criar uma entrada de seletor de cores e implementar a funcionalidade para alterar a cor do pincel.
Como adicionar uma entrada de intervalo para ajustar o tamanho do pincel e implementar a funcionalidade.

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Criar uma estrutura básica de página web usando HTML.
Usar ouvintes de eventos JavaScript para lidar com interações do usuário.
Trabalhar com elementos HTML <canvas> para desenhar.
Estilizar um aplicativo web usando CSS.
Combinar HTML, CSS e JavaScript para construir um quadro de desenho funcional.

Criar a Estrutura HTML

Requisitos:

Abra o arquivo index.html.
Configure a estrutura HTML básica em index.html com um canvas, cabeçalho e elementos de controle.

Funcionalidade:

Os arquivos do projeto e a estrutura HTML básica serão criados, mas ainda não haverá funcionalidade de desenho.

Passos:

<!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>

Adicionando o Canvas

Requisitos:

Em index.html, adicione um elemento <canvas> com o ID "whiteboard" e dimensões (largura e altura) de sua escolha.

Funcionalidade:

O canvas será adicionado à página web, mas não terá nenhuma capacidade de desenho.

Passos:

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

Adicionando Funcionalidade de Desenho

Requisitos:

Em script.js, adicione código JavaScript para habilitar o desenho no canvas quando o mouse é clicado e movido.
Implemente event listeners para os eventos mousedown, mouseup e mousemove.

Funcionalidade:

Os usuários agora podem desenhar no canvas usando o mouse.

Passos:

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

Este código habilita o desenho no canvas quando o mouse é clicado e movido.

Adicionando Funcionalidade de Limpeza

Requisitos:

Em script.js, adicione código JavaScript para limpar o canvas quando o botão "Clear" for clicado.
Crie um botão em index.html com o ID "clear-btn".

Funcionalidade:

Os usuários podem limpar o canvas para começar um novo desenho.

Passos:

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

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

Este código permite que os usuários limpem o canvas clicando no botão "Clear".

Adicionando Controle de Cor da Ferramenta de Desenho

Requisitos:

Em script.js, adicione código JavaScript para permitir que os usuários selecionem uma cor para a escova usando um elemento <input type="color">.
Crie a entrada do seletor de cores em index.html com o ID "color-picker".

Funcionalidade:

Os usuários podem escolher uma cor para sua escova.

Passos:

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

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

Este código permite que os usuários selecionem uma cor para a escova usando o seletor de cores.

Adicionando Controle de Tamanho da Ferramenta de Desenho

Requisitos:

Em script.js, adicione código JavaScript para permitir que os usuários ajustem o tamanho da escova usando um elemento <input type="range">.
Crie a entrada de intervalo em index.html com o ID "brush-size".

Funcionalidade:

Os usuários podem alterar o tamanho da escova para fazer traços mais grossos ou mais finos.

Passos:

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

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

Este código permite que o usuário ajuste o tamanho da escova usando a entrada de intervalo.

Estilização CSS

Requisitos:

Abra o arquivo styles.css.
Adicione estilos CSS para tornar o aplicativo web visualmente atraente.

Funcionalidade:

Aplique estilos básicos aos elementos do aplicativo web.

Passos:

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

Executando o Aplicativo

Abra index.html em um navegador web.
Teste o aplicativo adicionando despesas e verificando se a lista de despesas e o resumo são atualizados corretamente.
O efeito da página é o seguinte:

Resumo

Parabéns! Você criou um aplicativo web simples de quadro de desenho usando HTML, CSS e JavaScript. Os usuários podem desenhar na tela (canvas), alterar a cor do pincel e ajustar o tamanho do pincel.