Canvas-Lehrbeispiele
Diese Seite braucht Browser mit aktivierten JavaScript
Canvas (einfach)
2D-Gerätekoordinaten ( x,y-Pixel )
Texte schreiben ( .fillText )
Transparenz
gerundete Rechtecke
geschlossene Polygone ( .close_path )
Globale Durchsichtigkeit (Transparenz, .globalAlpha )
Farbgradient ( .createLinearGradient )
Balken-Diagramm
Kreis-Diagramm
Verschiedene Formen, Schatten
Math.Funktionen
2D-Gerätekoordinaten ( x,y-Pixel )
Linien zwischen Linienpunkten
Bezier Kurven ( zusammengesetzt )
Lissajous Kurven
Herzkurve ( experimentelle Form )
Zykloiden ( Rad rollt Gerade )
Hipparchos-Epizyklen ( Rad rollt auf rad )
Rollkurven ( Rad rollt auf rad )
Transformationen
scale, translate, rotate
Bewegte Windmühlen
<h1> Text ( ctx.fillText ) </h1> <canvas width="600" height="200" style="border:1px solid #ccc;"></canvas> <script> var ctx = document.getElementsByTagName('canvas')[0].getContext('2d'); ctx.fillStyle = "#227"; ctx.font = "italic 32px Courier"; ctx.fillText("Hallo Welt 1", 20, 1 * 50); ctx.fillStyle = "#449"; ctx.font = "48px Verdana"; ctx.fillText("Hallo Welt 2", 20, 2 * 50); ctx.fillText("Hallo Welt 3", 20, 3 * 50); </script>
Bitte modifizieren! ( Quellcodefehler in Browser-Fehlerconsole )