Kleiner JavaScript Kurs
Adventskranz
Zum Programmieren eines Adventskranzes benötigen wir zunächst ein Programm, dass eine Kerze zeichnet. Das Programm erhält als Übergabeparameter x und y Koordinaten für die Kerze (linke obere Ecke der roten Kerze) und eine Zahl, mit der gesteuert wird, ob die Kerze brennt (Wert größer 0), oder ob die Kerze nicht brennt (Wert kleiner oder gleich 0). Die Kerze wird in einem kleinen Canvas gezeichnet:
<body>
<canvas id="myCanvas" width="200" height="200" style="background-color: green; "></canvas>
</body>
Die Kerze besteht aus einem roten Rechteck, einer kurzen, schwarzen Linie (der Docht) und ggf. aus einem Kreis (Flamme, wenn die Kerze brennt)
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var breite = canvas.width;
var hoehe = canvas.height;
function kerze(x,y,an_aus){
//an_aus>0 an, an_aus<=0 aus
ctx.fillStyle = "red";
ctx.fillRect(x,y,20,50);
ctx.moveTo(x+10, y);
ctx.lineTo(x+10, y-5);
ctx.strokeStyle="black";
ctx.stroke();
ctx.strokeStyle="transparent";
if(an_aus>=1){farbe="yellow"}
else{farbe="transparent"}
ctx.beginPath();
ctx.arc(x+10, y-10, 10, 0, Math.PI*2);
ctx.fillStyle = farbe;
ctx.fill();
ctx.closePath();
ctx.stroke();
}
//Test:
kerze(50,50,1);
</script>
Als nächstes zeichnen wir den kompletten Adventskranz (4 Kerzen). Das Programm adventskranz(zahl) erhält als Übergabeparameter eine Zahl, die angibt wieviele Kerzen leuchten sollen:
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var breite = canvas.width;
var hoehe = canvas.height;
function kerze(x,y,an_aus){
//an_aus>0 an, an_aus<=0 aus
ctx.fillStyle = "red";
ctx.fillRect(x,y,20,50);
ctx.moveTo(x+10, y);
ctx.lineTo(x+10, y-5);
ctx.strokeStyle="black";
ctx.stroke();
ctx.strokeStyle="transparent";
if(an_aus>=1){farbe="yellow"}
else{farbe="transparent"}
ctx.beginPath();
ctx.arc(x+10, y-10, 10, 0, Math.PI*2);
ctx.fillStyle = farbe;
ctx.fill();
ctx.closePath();
ctx.stroke();
}
//Test:
kerze(50,50,1);
</script>
function adventskranz(adventnr){
kerze(breite/4, hoehe/5, adventnr);
kerze(breite/4*3-20, hoehe/5, adventnr-1);
kerze(breite/4, hoehe/5*3, adventnr-2);
kerze(breite/4*3-20, hoehe/5*3, adventnr-3);
}
//Test, 3. Advent:
adventskranz(3);
So könnte der Adventskranz fertig aussehen (hier die HTML-Seite mit dem kompletten Programm)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Adventskranz</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"
style="background-color: green; border-radius: 50px; position: absolute; top: -6em; right: 0em;">
</canvas>
</body>
<script>
//Canvas als Zeichenfläche festlegen (Variable canvas und ctx);
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var breite = canvas.width;
var hoehe = canvas.height;
function kerze(x,y,an_aus){
//an_aus>0 an, an_aus<=0 aus
ctx.beginPath();
ctx.rect(x,y,20,50);
ctx.strokeStyle="transparent";
ctx.fillStyle = "red";
ctx.fill();
ctx.closePath();
ctx.stroke();
ctx.moveTo(x+10, y);
ctx.lineTo(x+10, y-5);
ctx.strokeStyle="black";
ctx.stroke();
ctx.strokeStyle="transparent";
var my_gradient=ctx.createRadialGradient(x+10, y-3, 1, x+10, y-10,8);
my_gradient.addColorStop(0, "red");
my_gradient.addColorStop(1, "yellow");
if(an_aus>=1){farbe=my_gradient}
else{farbe="transparent"}
ctx.beginPath();
ctx.arc(x+10, y-10, 10, 0, Math.PI*2);
ctx.fillStyle = farbe;
ctx.fill();
ctx.closePath();
ctx.stroke();
}
function adventskranz(adventnr){
kerze(breite/4, hoehe/5, adventnr);
kerze(breite/4*3-20, hoehe/5, adventnr-1);
kerze(breite/4, hoehe/5*3, adventnr-2);
kerze(breite/4*3-20, hoehe/5*3, adventnr-3);
}
var current_datetime=new Date();
var adv=0;
if(current_datetime.getTime() >= new Date("2022-12-18").getTime()){adv=4}
else if(current_datetime.getTime() >= new Date("2022-12-11").getTime()){adv=3}
else if(current_datetime.getTime() >= new Date("2022-12-04").getTime()){adv=2}
else if(current_datetime.getTime() >= new Date("2022-11-27").getTime()){adv=1}
adventskranz(adv);
</script>
</html>