Oppgave 5

Bruk funksjonene i et canvas og tegn et hus med vindu, dør og trekantet tak ved hjelp av JavaScript. Før du skriver koden, kan det være lurt å tegne huset inn i koordinatsystemet på et ark. Husk at x-aksen peker mot høyre og y-aksen peker nedover.

Resultat

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var o5Canvas = document.getElementById("o5-canvas");
    var o5Ctx = o5Canvas.getContext("2d");

    o5Ctx.beginPath();
    o5Ctx.lineTo(o5Canvas.width / 2 + 75, 100);
    o5Ctx.lineTo(o5Canvas.width / 2, 25);
    o5Ctx.lineTo(o5Canvas.width / 2-75, 100);
    o5Ctx.lineTo(410, 100);
    o5Ctx.strokeStyle = "black";
    o5Ctx.stroke();
    o5Ctx.fillStyle = "#FF5254";
    o5Ctx.fill();

    o5Ctx.beginPath();
    o5Ctx.rect(o5Canvas.width / 2 - 75, 100, 150, 100);
    o5Ctx.rect(o5Canvas.width / 2 - 50, 125, 35, 35);
    o5Ctx.strokeStyle = "black";
    o5Ctx.stroke();
    
    o5Ctx.beginPath();
    o5Ctx.rect(o5Canvas.width / 2 + 10, 125, 35, 75);
    o5Ctx.strokeStyle = "black";
    o5Ctx.stroke();
    o5Ctx.fillStyle = "rgba(255, 0, 0, 0.25)";
    o5Ctx.fill();
}

HTML

                
<canvas id="o5-canvas" width="668" height="256"></canvas>