PMG1719/GL 2a
Aus ProgrammingWiki
Wiki-Quelltext dieser Seite.
<language>Javascript</language>
<canvas width=500 height=500></canvas>
==Einführung==
In diesem Arbeitsblatt wollen wir den vollen Funktionsumfang der [https://www.w3schools.com/graphics/canvas_intro.asp Canvas-Bibliothek] nutzen. Im Vergleich zum letzten Canvas-Arbeitsblatt ist dazu etwas mehr Code notwendig.
'''Beispiel'''
Wir zeichnen eine vertikale Linie von x=10,y=0 bis x=10, y=500:
<code id="58d79189c1e3c">
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="58d79189c1eae">
draw();
</run>
'''Wichtig:''' Die Zeilen 3-6 und 11-12 müssen Sie bei jeder Aufgabe in diesem Arbeitsblatt einfügen!
[https://www.w3schools.com/graphics/canvas_reference.asp Referenz aller Canvas-Funktionen und -Einstellungen]
==Rechtecke==
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="58d7996806104">
function draw(){
var c = document.getElementById('canvas1');
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="58d799680624e">
draw();
</run>
'''Aufgabe1'''
Der folgende Code zeichnet ein Rechteck mit den Abmessungen 480x480 an die Position x=10,y=10.
* Ergänzen Sie ein zweites Rechteck mit den Abmessungen 460x460 an die Position x=20,y=20!
* Ergänzen Sie ein drittes Rechteck mit den Abmessungen 440x440 an die Position x=30,y=30!
<code id="58d7996806175">
function draw(){
var c = document.getElementById('canvas1');
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="58d79968062b3">
draw();
</run>
'''Aufgabe 2'''
Verwenden Sie eine for-Schleife, um Rechtecke zu zeichnen, die folgendes Muster ergeben:
[[Datei:Muster1.JPG | 500px]]
<code id="58d79968061d8">
function draw(){
var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="58d7996806314">
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:
<code id="58d7a42aa11c3">
function draw(){
var c = document.getElementById('canvas1');
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="58d7a42aa12d1">
draw();
</run>
'''Aufgabe 3'''
Folgender Code zeichnet einen Kreis mit dem Radius 10px an die Position x=250,y=250.
* Ergänzen Sie einen zweiten Kreis mit dem Radius 20px an die gleiche Position.
* Ergänzen Sie einen dritten Kreis mit dem Radius 30px an die gleiche Position.
<code id="58d7a42aa1248">
function draw(){
var c = document.getElementById('canvas1');
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="58d7a42aa134f">
draw();
</run>
'''Aufgabe 4'''
Verwenden Sie eine for-Schleife, um folgendes Muster zu erzeugen (bitte ignorieren Sie die horizontale Linie):
[[Datei:Muster2.JPG | 500px]]
<code id="58d7a622a9083">
function draw(){
var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="58d7a622a9147">
draw();
</run>
==Farben==
Mit der Eigenschaft ''strokeStyle'' können wir die Linienfarbe ändern:
<code id="58d7acaf32e45">
function draw(){
var c = document.getElementById('canvas1');
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="58d7acaf330fc">
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\%$
Beachten Sie 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="58d7acaf32ed2">
function draw(){
var c = document.getElementById('canvas1');
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="58d7acaf3317c">
draw();
</run>
Das Beispiel zeichnet drei Rechtecke mit drei verschiedenen Farben aus dem Farbkreis. '''Beachten Sie, dass jetzt in jedem Schritt die Anweisungen ''beginPath'', ''stroke'' und ''closePath'' wiederholt werden müssen!'''
'''Aufgabe 5'''
Wiederholen Sie Augabe 2. Die Rechtecke sollen nun in Regenbogenfarben gezeichnet werden, ungefähr so:
[[Datei:Muster3.JPG | 500px]]
<code id="58d7acaf32f57">
function draw(){
var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="58d7acaf331f8">
draw();
</run>
'''Aufgabe 6'''
Wiederholen Sie Augabe 4. Die Kreise sollen nun in Regenbogenfarben gezeichnet werden.
<code id="58d7acaf32fd6">
function draw(){
var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="58d7acaf33278">
draw();
</run>
'''Zusatzaufgabe'''
Wiederholen Sie Aufgabe 2 oder Aufgabe 4. Die Liniendicke der Rechtecke bzw. Kreise soll sich schrittweise ändern.
[https://www.w3schools.com/tags/canvas_linewidth.asp Informationen über Canvas lineWidth]
<code id="58d7acaf33054">
function draw(){
var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.clearRect(0,0,500,500);
ctx.beginPath();
ctx.stroke();
ctx.closePath();
}
</code>
<run id="58d7acaf332f6">
draw();
</run>