PMG1920/weitere ÜA 3
Aus ProgrammingWiki
Wiki-Quelltext dieser Seite.
<language>Javascript</language>
'''Die folgenden Übungen sind dem Brückenkurs der HS Görlitz/Zittau entnommen.'''
Das Arbeitsblatt ist recht lang.
Bitte beachtet daher wieder, dass Syntaxfehler in den Boxen sich von oben nach unten fortpflanzen.
Daher evtl. unvollständigen/problematischen Quelltext zeilenweise mit '''//''' oder abschnittsweise mit '''/*''' ... '''*/''' als Kommentar setzen.
==Einführung==
<canvas width=500 height=500></canvas>
'''Beispiel'''
Wir zeichnen eine vertikale Linie von x=10,y=0 bis x=10, y=500:
<code id="5e120eeb5dff4">
function draw(){
var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.moveTo(10,0);
ctx.lineTo(10,500);
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e120eeb5e22b">
draw();
</run>
'''Wichtig:''' Die Zeilen 3-6 und 11-12 müssen bei jeder Aufgabe in diesem Arbeitsblatt eingefügt werden.
[https://www.w3schools.com/graphics/canvas_reference.asp Referenz aller Canvas-Funktionen und -Einstellungen]
==Rechtecke==
<canvas width=500 height=500></canvas>
Mit der Canvas-Funktion ''rect'' können wir Rechtecke zeichnen.
Aufbau: ''rect(x, y, breite, höhe)''
'''Beispiel'''
Wir zeichnen ein Rechteck an die Position x=10,y=10:
<code id="5e120eeb5e0f9">
function draw(){
var c = document.getElementById('canvas2');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.rect(10,10,480,480);
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e120eeb5e2af">
draw();
</run>
'''Aufgabe1'''
Der Beispielcode zeichnet ein Rechteck mit den Abmessungen 480x480 an die Position x=10,y=10.
* Ergänze ein zweites Rechteck mit den Abmessungen 460x460 an die Position x=20,y=20!
* Ergänze ein drittes Rechteck mit den Abmessungen 440x440 an die Position x=30,y=30!
<code id="5e120eeb5e181">
function draw(){
var c = document.getElementById('canvas2');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.rect(10,10,480,480);
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e120eeb5e320">
draw();
</run>
'''Aufgabe 2'''
Verwende eine for-Schleife, um Rechtecke zu zeichnen, die folgendes Muster ergeben:
[[Datei:Muster1.JPG | 500px]]
<canvas width=500 height=500></canvas>
<code id="5e121139ce354">
function draw(){
var c = document.getElementById('canvas3');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139ce87f">
draw();
</run>
==Kreise==
Mit der Canvas-Funktion ''arc'' können wir [https://www.w3schools.com/tags/canvas_arc.asp Kreise] zeichnen.
'''Aufbau:''' ''arc(x, y, radius, startwinkel, endwinkel)''
Für Kreise gilt: ''startwinkel=0'' und ''endwinkel=2*Math.PI''
'''Beispiel'''
Wir zeichnen einen Kreis mit dem Radius 10px an die Position x=250,y=250:
<canvas width=500 height=500></canvas>
<code id="5e121139ce41d">
function draw(){
var c = document.getElementById('canvas4');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.arc(250,250,10,0,2*Math.PI);
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139ce916">
draw();
</run>
'''Aufgabe 3'''
Der Beispielcode zeichnet einen Kreis mit dem Radius 10px an die Position x=250,y=250.
* Ergänze einen zweiten Kreis mit dem Radius 20px an die gleiche Position.
* Ergänze einen dritten Kreis mit dem Radius 30px an die gleiche Position.
<code id="5e121139ce4a1">
function draw(){
var c = document.getElementById('canvas4');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.arc(250,250,10,0,2*Math.PI);
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139ce98c">
draw();
</run>
'''Aufgabe 4'''
Verwende eine for-Schleife, um folgendes Muster zu erzeugen (horizontale Linie ignorieren):
[[Datei:Muster2.JPG | 500px]]
<canvas width=500 height=500></canvas>
<code id="5e121139ce548">
function draw(){
var c = document.getElementById('canvas5');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139ce9fb">
draw();
</run>
==Farben==
Mit der Eigenschaft ''strokeStyle'' können wir die Linienfarbe ändern:
<canvas width=500 height=500></canvas>
<code id="5e121139ce5b9">
function draw(){
var c = document.getElementById('canvas6');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.strokeStyle = 'hsl(100, 80%, 40%)';
ctx.rect(10,10,480,480);
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139cea72">
draw();
</run>
Der Farbwert ist wie folgt aufgebaut:
''hsl(hue, saturation, lightness)'', zu deutsch: ''hsl(farbe, sättigung, helligkeit)''
Es gilt:
* $0 \leq hue \leq 360$ (360 aufeinanderfolgende Regenbogenfarben aus dem Farbkreis)
* $0\% \leq saturation \leq 100\%$
* $0\% \leq lightness \leq 100\%$
Beachte außerdem, dass der Farbwert ein String, d.h. eine Zeichenkette ist.
Interessante Effekte werden möglich, wenn wir den Farbwert in eine Variable auslagern:
<code id="5e121139ce629">
function draw(){
var c = document.getElementById('canvas6');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
var farbwert = 0;
ctx.beginPath();
ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)';
ctx.rect(10,10,480,480);
ctx.stroke();
ctx.closePath();
farbwert = farbwert + 100;
ctx.beginPath();
ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)';
ctx.rect(20,20,460,460);
ctx.stroke();
ctx.closePath();
farbwert = farbwert + 100;
ctx.beginPath();
ctx.strokeStyle = 'hsl(' + farbwert + ', 80%, 40%)';
ctx.rect(30,30,440,440);
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139ceafe">
draw();
</run>
Das Beispiel zeichnet drei Rechtecke mit drei verschiedenen Farben aus dem Farbkreis. '''Beachte, dass in jedem Schritt die Anweisungen ''beginPath'', ''stroke'' und ''closePath'' wiederholt werden müssen!'''
'''Aufgabe 5'''
Wiederhole Aufgabe 2. Die Rechtecke sollen nun in Regenbogenfarben gezeichnet werden, ungefähr so:
[[Datei:Muster3.JPG | 500px]]
<canvas width=500 height=500></canvas>
<code id="5e121139ce699">
function draw(){
var c = document.getElementById('canvas7');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139ceb8b">
draw();
</run>
'''Aufgabe 6'''
Wiederhole Aufgabe 4. Die Kreise sollen nun in Regenbogenfarben gezeichnet werden.
<code id="5e121139ce709">
function draw(){
var c = document.getElementById('canvas7');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139cec08">
draw();
</run>
'''Zusatzaufgabe'''
Wiederhole Aufgabe 2 <u>oder</u> Aufgabe 4. Die Liniendicke der Rechtecke bzw. Kreise soll sich schrittweise ändern.
[https://www.w3schools.com/tags/canvas_linewidth.asp Informationen über Canvas lineWidth]
<canvas width=500 height=500></canvas>
<code id="5e121139ce793">
function draw(){
var c = document.getElementById('canvas8');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="5e121139cecae">
draw();
</run>