Brückenkurs Websites und Webapps/Canvas II

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 Postion 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>



'''Aufgaben'''

Der folgende Code zeichnet ein Rechteck mit den Abmessungen 480x480 an die Position x=0,y=0.
* 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>



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>


'''Aufgaben'''


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>


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>