search

iurygdeoliveira / Web-development-classes

Repository aimed at building collaborative knowledge about web development, especially with the computer science students at Campus Araguaína - IFTO. However, anyone can contribute if they wish to do so.
4 stars 41 forks source link

31º Desafio: Drawing App - Peso 3 #36

Closed iurygdeoliveira closed 1 year ago

iurygdeoliveira commented 1 year ago

Contact Details

iury.oliveira@ifto.edu.br

Challenge Description

Olá crianças inocentes! Estão preparados para se tornarem verdadeiros artistas da programação? Hoje proponho criarmos um Drawing App, um site onde vocês poderão soltar a imaginação e desenhar o que quiserem!

Para isso, precisaremos usar HTML, CSS e JavaScript. E não se preocupem, pois darei algumas dicas para vocês se orientarem.

Primeiro, precisaremos criar a área de desenho. Vocês podem fazer isso com um elemento canvas do HTML, que permite desenhar gráficos e animações em 2D. Depois, precisaremos de botões para escolher o tamanho do pincel e a cor do pincel. Para isso, podemos usar elementos de input do HTML, como range e color.

Agora vem a parte mais legal: o JavaScript! Precisaremos de alguns eventos para detectar quando o usuário está desenhando na tela, como mousemove e mousedown. Com esses eventos, podemos criar uma função que desenha linhas na tela com base na posição do mouse. E, é claro, precisaremos de uma variável para armazenar a cor e o tamanho do pincel escolhido pelo usuário.

Para ajudar ainda mais, deixo aqui algumas dicas de possíveis comandos CSS e JS que podem ser úteis:

CSS: cursor: pointer; (para mudar o cursor do mouse quando estiver sobre a área de desenho), display: flex; (para criar um layout flexível com os botões de escolha de cor e tamanho do pincel), align-items: center; justify-content: center; (para centralizar os botões na tela).

JS: addEventListener('mousemove', functionName); (para adicionar um evento de mousemove que chama uma função), context.lineTo(x, y); (para desenhar uma linha na área de desenho), context.strokeStyle = color; (para definir a cor do pincel), context.lineWidth = size; (para definir o tamanho do pincel).

Vamos lá, crianças! Soltem a imaginação e criem o Drawing App mais incrível de todos!

Exemplo

https://user-images.githubusercontent.com/30157522/224492663-a81d6204-5cb8-4bf4-b808-5e8d50694ec0.mp4

Additional tips

Código 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="style.css" />
    <title>Drawing App</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="700"></canvas>
    <div class="toolbox">
      <button id="decrease">-</button>
      <span id="size">10</span>
      <button id="increase">+</button>
      <input type="color" id="color">
      <button id="clear">X</button>
    </div>

    <script src="script.js"></script>
  </body>
</html>
apauloenzo commented 1 year ago

drawingapp.zip Equipe: Flasco

GiorgeLucas commented 1 year ago

Equipe Vikings

Resultado

_C__Users_XNull_Desktop_Programa%C3%A7%C3%A3o_Desafios%20de%20Desenvolvimento%20Web_Desafio%2031_index 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="style.css" />
    <title>Drawing App</title>
  </head>
  <body>
    <canvas id="canvas" width="800" height="500"></canvas>
    <div class="toolbox">
      <button id="decrease">-</button>
      <span id="size">10</span>
      <button id="increase">+</button>
      <input type="color" id="color">
      <button id="clear">X</button>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

body {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
    font-family: sans-serif;
}

#canvas {
    margin: 0 auto;
    display: block;
    background: #fff;
    border: 2px solid #000;
}

.toolbox {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 50px;
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    align-items: center;
}

.toolbox button {
    border: 1px solid #000;
    padding: 5px;
    margin: 0 10px;
}

#size {
    font-size: 20px;
    margin: 0 10px;
}

#color {
    width: 50px;
    padding: 5px;
    margin: 0 10px;
}

JS


const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
const size = document.querySelector("#size");
const decreaseSize = document.querySelector("#decrease");
const increaseSize = document.querySelector("#increase");
const color = document.querySelector("#color");
const clear = document.querySelector("#clear");

ctx.lineJoin = "round";
ctx.lineCap = "round";

let isDrawing = false;
let lastX = 0;
let lastY = 0;
let currentSize = 10;
let currentColor = "#000";

function draw(e) {
  if (!isDrawing) return;
  ctx.strokeStyle = currentColor;
  ctx.lineWidth = currentSize;
  ctx.beginPath();
  ctx.moveTo(lastX, lastY);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  lastX = e.offsetX;
  lastY = e.offsetY;
}

canvas.addEventListener("mousedown", e => {
  isDrawing = true;
  [lastX, lastY] = [e.offsetX, e.offsetY];
});

canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", () => (isDrawing = false));
canvas.addEventListener("mouseout", () => (isDrawing = false));

decreaseSize.addEventListener("click", () => {
  currentSize--;
  size.innerText = currentSize;
});

increaseSize.addEventListener("click", () => {
  currentSize++;
  size.innerText = currentSize;
});

color.addEventListener("change", e => {
  currentColor = e.target.value;
});

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