Rita ett hus

Med javascript går det bra att rita ut former på en canvasyta. Former är främst:

Kvadrat
Rektangel
Triangel
Cirkel

Själva syntaxen, den kod som används, är enkel.

Hemsidan där scriptet skrivs in:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Rita former</title>
</head>
<body onload="draw();">
<canvas id="testcanvas" width="800" height="600"></canvas>

<script>
function draw()
 { //I detta exempel ritar draw ut en kvadrat.
var c = document.getElementById("testcanvas");
var testfyrkant = c.getContext("2d");
testfyrkant.rect(20, 20, 150, 150);
testfyrkant.stroke();
}
</script>
</body>
</html>

Rita kvadrat

Ritar man en kvadrat räcker det med att ange övre vänstra hörnets koordinater, och nedre högra hörnet.

<script>
var c = document.getElementById("testcanvas");
var testfyrkant = c.getContext("2d");
testfyrkant.rect(20, 20, 150, 150);
testfyrkant.stroke();
</script>

Detta ritar ut en fyrkant med standardvärdet, svart linje som är 1 pixel bred, 20 pixlar från vänsterkanten och 150 pixlar in.

Rita rektangel

<script>
// Grön rektangel med tjocka kanter
var c = document.getElementById("testcanvas");
var testrektangel = c.getContext("2d");
testrektangel.beginPath();
testrektangel.lineWidth = "10";
testrektangel.strokeStyle = "green";
testrektangel.rect(50, 50, 100, 150);
testrektangel.stroke();
</script>

Skriver du så här ritas en grov rektangel med 10 pixlar bred, grön linje ut.

Vill du hellre rita en fylld, grön rektangel skriver du:

<script>
// Grön rektangel med tjocka kanter
var c = document.getElementById("testcanvas");
var testrektangel = c.getContext("2d");
testrektangel.fillStyle = "#00FF00";
testrektangel.fillRect(20, 20, 150, 100);
</script>

Rita triangel

Rita cirkel

Med hjälp av bara dessa enkla former går det att försöka skapa konst.

Välj bild att rita av

Det finn många olika bilder att välja på. Sök i t.ex. wikimdia commons site:commons.wikimedia.org house side

Välj sedan en bild av ett hus som har så enkla former och raka vinklar som möjligt. När du valt bild, sätter du igång med att försöka rita ut ett likadant hus med hjälp av de olika formerna. Tänk på att de ritas ut i samma ordning som du lägger in dem i funktionen "draw()".

Bildexempel

Lite svårare exempel

Kul med javascript/Former, rita ett hus

Innehåll