JavaScript og HTML

Grafikk i eget canvas

Vi kan lage et tegneområde med HTML og bruke JS til å tegne i det.

Markup

<canvas id="Ipanema" width="400px" height="100px"></canvas>  
   

Script

strand = document.getElementById("Ipanema");  
t = new Turtle(strand);
    

Resultat

Endre innhold i et element

Vi kan bytte ut HTML-innholdet.

Markup

<p id="p1"> Et avsnitt </p>
   

Script

p = document.getElementById("p1");  
p.innerHTML = "Et nytt avsnitt";
    

Resultat

Et avsnitt

Sette stil på et element

Vi kan endre stilsettet underveis.

Markup

<p id="p2"> Et avsnitt </p>
   

Script

p = document.getElementById("p2");  
p.style.color = "green";
    

Resultat

Et avsnitt

Oppgaver

  1. Lag et canvas med en ramme rundt
  2. Tegn en sirkel inne i canvas. Bruk sirkel-funksjonen med argument.
  3. Legg et avsnitt under canvas, som viser sirkelens omkrets og diameter.
  4. La sirkel-funksjonen endre innhold i avsnittet, basert på funksjonens argument.