Tegneprogram

Skip to content

Warning!

Denne oppgaven er svært krevende!

Vanskelighetsgrad: Cracked

I denne oppgaven skal du lage et enkelt tegnepgrogram med å bruke et <canvas> element og JavaScript.

Viktig lesestoff!

Ting du skal ha med:

HTML/CSS
  • ✏️ Du skal ha et <canvas> element som du skal bruke til å tegne på. F.eks. sett dette til 800x800 piksler.
  • ⚙️ Et “kontrollpanel” med settings:
    • Fargevelger med <input type="color">
  • 🛠️ En “verktøykasse” med verktøy (knapper):
    • Knapp for å velge blyant/pensel
    • Viskelær (tegner med hvit (eller gjennomsiktig))
JavaScript
  • 🖱️ Bruk “Mouse Events” til å finne ut hvor du trykker og for å plassere piksler basert på dette
  • 🧩 Del opp koden i små funksjoner.
    • function for å bytte farge globalt
    • function for å plassere en pixel
    • function for å tegne en strek fra A til B.
      • F.ex. drawLine(x1, y1, x2, y2)
    • Tenk på at hver funksjon skal helst gjøre én ting hver!
  • 🤔 For å få dette til å fungere må du tenke på følgende:
    • Hvordan kan jeg tegne en piksel der jeg trykker?
    • Hvordan kan jeg finne ut hvor musen var før og etter at jeg flyttet den?

Ekstra utfordringer Cracked

Generelt

  • Legg til shortcut keys for ulike funksjoner, som for eksempel (B) for “Brush”, (E) for “Eraser”.
Ekstra verktøy
  • 🪣 Fyll verktøy
    • Fyller inn et område med en gitt farge
  • 🍾 “Sprayflaske”-verktøy
    • Plasserer tilfedige piksler av den gitte fargen i en range fra der du trykker
  • 🔳 “Rektangel”-verktøy
    • Lar deg plassere rektangler
Ekstra funksjoner
  • “Secondary”-farge som du tegner med høyreklikk
  • Tykkelse med <input type="range">
  • Tøm bildet (sett alt til hvitt)
  • 🖼️ Lagre bilde som PNG

Ekstra ekstra ekstra ekstra Smoked

????

Dette er hovedsaklig idéer til ting dere kan gjøre hvis dere vil ta dette enda videre!

  • “Hent bilde fra PNG”-verktøy, som henter bildet til canvas elementet.
Ekstra verktøy og effekter
  • 🤔 “Selection”-verktøy der du kan velge et område med piksler og flytte det rundt
  • ♻️ “Rotation”-verktøy som lar deg rotere bildet med 90, 180 eller 270 grader
  • ↕️ “Scale”-verktøy som lar deg endre størrelsen på bildet
  • 🌈 “Hue”-effekt som gjør at du kan “rotere” alle fargene på bildet
  • 🎥 “Saturation”-effekt som gjør at du kan gjøre fargene kraftigere eller svakere
  • 😎 “Brightness”- og “Kontrast”-effekt som lar deg gjøre bildet lysere eller mørkere
  • ⭕ “Sirkel”-verktøy som lar deg plassere sirkler