Brückenkurs Websites und Webapps/Canvas II

Aus ProgrammingWiki

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
<canvas width=1000 height=500></canvas>
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,1000,500);

   
   ctx.moveTo(10,0);
   ctx.lineTo(10,500);

   ctx.stroke();
}
</code>
<run id="58d79189c1eae">
draw();
</run>

'''Wichtig:''' Die Zeilen 3,4,5 und 11 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]

Brückenkurs Websites und Webapps/Canvas II

Suche