Programme de dessin

Skip to content

Ceci est un texte traduit automatiquement qui peut contenir des erreurs !

Warning!

Cette tâche est très exigeante !

Difficulté : Cracked

Dans cette tâche, vous allez créer un simple programme de dessin en utilisant un élément <canvas> et JavaScript.

Important à lire !

Choses à emporter :

  • Varmt tøy (ullundertøy, fleecejakke, varm lue og votter)
  • Vanntett jakke og bukser
  • Gode tursko
  • Ryggsekk (ca. 30-40 liter)
  • Matpakke og drikke
  • Førstehjelpsutstyr
  • Hodelykt eller lommelykt
  • Kart og kompass/GPS
  • Solbriller og solkrem
  • Myggmiddel
  • Personlige medisiner
  • Kamera
  • Sitteunderlag
  • Kniv
  • Ekstra batterier/powerbank
  • Penger/kort
  • Mobiltelefon (men husk at dekningen kan være begrenset)
  • Vannflaske eller drikkeblære (minst 1 liter)
  • Toalettpapir og hånddesinfeksjon
  • Plastpose for søppel
  • Fløyte (for nødsituasjoner)
  • Fyrstikker eller lighter (vanntett emballert)
  • Reparasjonssett (tape, nål og tråd)
  • Liten notatbok og penn
  • Bok eller annet tidsfordriv
  • Eventuelt: kikkert, fiskeutstyr, fuglebok

HTML/CSS
  • ✏️ Vous devez avoir un élément <canvas> que vous utiliserez pour dessiner. Par exemple, définissez-le à 800x800 pixels.
  • ⚙️ Un “panneau de contrôle” avec des paramètres :
    • Sélecteur de couleur avec <input type="color">
  • 🛠️ Une “boîte à outils” avec des outils (boutons) :
    • Bouton pour choisir le crayon/pinceau
    • Gomme (dessine avec du blanc (ou transparent))

JavaScript
  • 🖱️ Utilisez “Mouse Events” pour déterminer où vous cliquez et pour placer des pixels en fonction de cela
  • 🧩 Décomposez le code en petites fonctions.
    • function pour changer la couleur globalement
    • function pour placer un pixel
    • function pour dessiner une ligne de A à B.
      • Par exemple, drawLine(x1, y1, x2, y2)
    • Pensez que chaque fonction doit idéalement faire une seule chose !
  • 🤔 Pour que cela fonctionne, vous devez penser à ce qui suit :
    • Comment puis-je dessiner un pixel là où je clique ?
    • Comment puis-je déterminer où la souris était avant et après que je l’ai déplacée ?

Défis supplémentaires Cracked

Général

  • Ajoutez des raccourcis clavier pour différentes fonctions, comme par exemple (B) pour « Pinceau », (E) pour « Gomme ».

Ekstra verktøy
  • 🪣 Outil de remplissage
    • Remplit une zone avec une couleur donnée
  • 🍾 Outil « vaporisateur »
    • Place des pixels aléatoires de la couleur donnée dans une plage à partir de l’endroit où vous cliquez
  • 🔳 Outil « rectangle »
    • Vous permet de placer des rectangles

Ekstra funksjoner
  • Couleur “Secondaire” que vous dessinez avec un clic droit
  • Épaisseur avec <input type="range">
  • Effacer l’image (définir tout en blanc)
  • 🖼️ Enregistrer l’image au format PNG

Ekstra ekstra ekstra ekstra Smoked

????

Ce sont principalement des idées de choses que vous pouvez faire si vous souhaitez aller encore plus loin !

  • Outil “Récupérer image depuis PNG”, qui récupère l’image vers l’élément canvas.

Outils et effets supplémentaires
  • 🤔 L’outil “Sélection” qui vous permet de sélectionner une zone de pixels et de la déplacer
  • ♻️ L’outil “Rotation” qui vous permet de faire pivoter l’image de 90, 180 ou 270 degrés
  • ↕️ L’outil “Scale” qui vous permet de modifier la taille de l’image
  • 🌈 L’effet “Hue” qui vous permet de “faire tourner” toutes les couleurs de l’image
  • 🎥 L’effet “Saturation” qui vous permet de rendre les couleurs plus ou moins vives
  • 😎 L’effet “Luminosité” et “Contraste” qui vous permet de rendre l’image plus claire ou plus sombre
  • ⭕ L’outil “Cercle” qui vous permet de placer des cercles