Kul med javascript/Former, rita ett hus
Rita ett hus redigera
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 redigera
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 redigera
<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 redigera
Rita cirkel redigera
Med hjälp av bara dessa enkla former går det att försöka skapa konst.
Välj bild att rita av redigera
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 redigera
Lite svårare exempel
