{"id":1566,"date":"2019-01-10T18:37:34","date_gmt":"2019-01-10T17:37:34","guid":{"rendered":"http:\/\/evileu.de\/zum-schwarzen-pinguin\/?p=1566"},"modified":"2019-01-10T18:37:34","modified_gmt":"2019-01-10T17:37:34","slug":"erster-versuch-mit-html5-canvas-ein-kleines-feuerwerk","status":"publish","type":"post","link":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/2019\/01\/10\/erster-versuch-mit-html5-canvas-ein-kleines-feuerwerk\/","title":{"rendered":"Erster Versuch mit HTML5 Canvas: ein kleines Feuerwerk"},"content":{"rendered":"

Ich habe bei den Musik-Animationen die ersten Erfahrungen mit dem Canvas-Element gesammelt, und ich muss sagen, ich bin sehr angetan. Das er\u00f6ffnet wirklich ungeahnte M\u00f6glichkeiten, und ich finde es wesentlich eing\u00e4nginger und intuitiver zu bedienen als CSS-Animationen, wo man sich ja ewig mit der Cross-Browser-Kompatibilit\u00e4t herumschlagen muss. Canvas wird von den meisten g\u00e4ngigen modernen Browsern unterst\u00fctzt, genauere Info hier auf der Seite der Canvas Community<\/a>.<\/p>\n

Statt langer Vorreden legen wir gleich los: passend zum Jahreswechsel habe ich eine kleine Feuerwerksanimation geschrieben. Sowas gibt es schon, auch als downloadbare Freeware, aber mir kam der Sourcecode der Beispiele immer unn\u00f6tig aufgeblasen vor, ich dachte mir, das muss doch auch einfacher gehen…. und es geht einfacher, deutlich.<\/p>\n

Die Vorgabe<\/h2>\n

Meine Vorgabe ist folgende: auf einem dunklen Sternenhimmel sollen farbige Feuerwerksraketen sternf\u00f6rmig explodieren, an zuf\u00e4lligen Stellen auf dem Canvas. Die Animation soll per Klick startbar sein und dann in einer Endlosschleife laufen. Aussehen soll das ganze etwa so:<\/p>\n

\"screenshot_feuerwerk\"

screenshot_feuerwerk<\/p><\/div>\n

Daf\u00fcr brauche ich zwei Zeitschleifen. Die \u00e4ussere Schleife wird endlos wiederholt (setInterval…) und erzeugt immer einen neuen zuf\u00e4lligen Mittelpunkt der n\u00e4chsten Explosion. An einem gegebenen Mittelpunkt startet dann die zweite Zeitschleife, hier soll die Sternenexplosion in mehreren Iterationsschritten von der Mitte aus zeitverz\u00f6gert ablaufem, daf\u00fcr nehme ich einen setTimeout. F\u00fcr die Skriptsteuerung brauche ich Jquery, das binde ich mal lokal ein.<\/p>\n

Los gehts: wir basteln uns erst einmal die Leinwand, den canvas, das ist straightes HTML:<\/p>\n

<canvas id=\"leinwand\" width=\"400\" height=\"400\" \r\nstyle=\"display: block; background: url('sternenhimmel.jpg')\" ><\/canvas><\/pre>\n
Ich lege hier gleich mal einen netten Sternenhimmel in den Hintergrund.<\/p>\n
Dann brauchen wir noch einen Startknopf:<\/p>\n
<input type=\"button\" value = \"Abspielen\" onclick = \"kontrolle()\" ><\/pre>\n
Die Funktion kontrolle() tut nichts weiter als die Funktion zeichnen() aufzurufen, hier k\u00f6nnte man noch Parameter \u00fcbergeben, z.B. eine Wiederholungsrate oder die Dauer einer Schleife, aber ich hab das mal gelassen und setze die entsprechenden Werte direkt im Code. Als allererste Massnahme definiert die Funtkion zeichnen() einen Canvas-2d-Context, mit dem arbeiten wir dann weiter:<\/p>\n
function zeichnen(param) {\r\n\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0 \/\/ get the context from the canvas to draw on\r\n\u00a0\u00a0 \u00a0var lwd = $(\"#leinwand\").get()[0].getContext(\"2d\");\r\n...<\/pre>\n
lwd ist jetzt unser Zeichenbrett.<\/p>\n
Wie man einen Stern zeichnet<\/h2>\n
Wir z\u00e4umen das Pferd jetzt mal von hinten auf. Wie zeichnet man \u00fcberhaupt einen Stern auf den Canvas? Man braucht einen festen Mittelpunkt in Form einer x- und einer y-Koordinate, und einen festen Radius. Dann braucht man noch eine mathematische Formel, die einem ausrechnet bis zu welchem Endpunkt ein Strahl zu einem bestimmten Winkel gesetzt werden soll. Die Formel packt man in eine for…Schleife, und z\u00e4hlt den Winkel einfach hoch, bis man einmal rum ist.<\/p>\n
\/\/Begin funktion strahlen zeichnen\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\nfunction strahlen(fx,fy,radius){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var rad = radius;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Beginn strahlen graduell\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0for (grad = -1; grad <=1; grad = grad + 0.2){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0theta = grad*Math.PI;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0lwd.moveTo(fx, fy);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0lwd.lineTo(fx + rad * Math.cos(theta), fy + rad * Math.sin(theta));\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/jeder Strahl eine andere Farbe\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0lwd.strokeStyle = \"hsl(\"+Math.floor((Math.random()*359))+\", 100%, 50%)\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0lwd.stroke();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Nach der letzten Schleife Leinwand leer machen\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (radius == 100){lwd.clearRect(0, 0, 400, 400);}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/**Pfad neu zeichnen (ohne \"Geisterbilder\")\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0lwd.beginPath();\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\/\/end strahlen graduell\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n} \/\/ Ende von fucntion strahlen\u00a0\u00a0 \u00a0zeichnen<\/pre>\n
Man setzt den Cursor mit .moveTo auf den Mittelpunkt, und zeichnet mit dem .lineTo den Strahl bis zur berechneten Koordinate. .stroke() f\u00fchrt die Zeichnung aus. Dann wird der Winkel hochgesetzt, man zeichnet den n\u00e4chsten Strahl, bis man einmal um den Kreis von -1 bis +1 herum ist. Ich hab hier auch noch die Farbdefinition mit hineingepackt und bestimme f\u00fcr jeden Strahl eine zuf\u00e4llige hsl-Farbe, das macht sich ganz h\u00fcbsch.<\/p>\n
Nach dem letzten Aufruf (gegebener maximaler Radius von 100 ist erreicht) macht man die Leinwand leer, damit der Stern auch wieder verschwindet. .beginPath() macht dann noch klar Schiff auf dem internen Pfad-Objekt, wenn das fehlt hat man dann sp\u00e4ter „Geisterbilder“ von den vorher bereits gezeichneten Sternen.<\/p>\n
Die erste Animation: Sterne mit steigenden Radien<\/h2>\n
Damit der Stern nicht in einem Flash auftaucht, sondern sich wie bei einer Explosion von innen heraus vergr\u00f6\u00dfert, rufe ich die soeben definierte Funktion strahlen() mehrfach auf, immer mit dem selben Mittelpunkt, aber mit stetig wachsenden Radien. Daf\u00fcr benutze ich einen setTimeout:<\/p>\n
\/\/*********begin function sternchen mit timeout\u00a0\u00a0 \u00a0\r\nfunction sternchen(koord1,koord2){\r\n\r\nvar i = 10;\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/\u00a0 z\u00e4hler f\u00fcr den Radius auf 10 (px)\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\/\/Zuf\u00e4lliger Mittelpunkt des sterns kommt als Parameter rein koord zwischen 1 und 400\r\nvar x1 = koord1;\r\nvar y1 = koord2;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0function myLoop () {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/\u00a0 Loop function definieren\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 setTimeout(function () {\u00a0\u00a0\u00a0 \/\/\u00a0 setTimeout Wenn die Loop-Funktion aufgerufen wird\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 strahlen(x1,y1,i);\u00a0\u00a0<\/span> \u00a0\u00a0\u00a0 \u00a0\/\/\u00a0 Strahlen zeichnen an festem Mittelpunkt und Radius\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 i=i+10;;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/\u00a0 Radius um 10 (px) hochsetzen\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 if (i <=100) {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/\u00a0 Radius <= 100? \u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 myLoop();\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/\u00a0 Loop function erneut aufrufen, Strahlen mit neuem Radius zeichnen\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 } \u00a0\u00a0 \u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 }, 50<\/span>)\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/\u00a0 ..\u00a0 setTimeout() auf 50 ms\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0} \/\/*******Ende von function myloop\r\n\r\nmyLoop();\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Startet den Loop\r\n\r\n} \/\/******ende von function sternchen<\/pre>\n
Mein i geht in 10er-Schritten hoch, das benutze ich als Radius f\u00fcr den explodierenden Stern in px. Die x- und y-Koordinate des Mittelpunkts bleiben immer gleich, die hab ich als Parameter reingegeben. Der Timeout l\u00e4uft auf 50 Millisekunden, das ergibt eine h\u00fcbsch gleichm\u00e4ssige Bewegung. Die Schleife bricht erst ab, wenn der maximale Radius von 100 px erreicht ist.<\/p>\n
Die zweite Animation: alle halbe Sekunde ein neuer zuf\u00e4lliger Mittelpunkt<\/h2>\n
Meine Funktion sternchen() wird jetzt alle 500 my aufgerufen, und bei jedem Aufruf wird eine zuf\u00e4llige x- und y-Koordinate f\u00fcr den Mittelpunkt der Explosion generiert. Das ganze wird mit einem setInterval in einer Endlosschleife gesteuert:<\/p>\n
\/\/Beginn Feuerwerk Endlosschleife\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/passiert alle x millisekunden\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var drawLinesInterval = setInterval(function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Leinwand putzen\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0lwd.clearRect(0, 0, 400, 400);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Zuf\u00e4lligen Mittelpunkt des Sterns bestimmen Koordinaten zwischen 1 und 400\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var koord1 = Math.floor(Math.random() * 20 + 1)*20;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var koord2 = Math.floor(Math.random() * 20 + 1)*20;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\/\/Funktion zum Sternzeichnen aufrufen\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0sternchen(koord1,koord2);<\/span>\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}, 500); \/\/ end drawLinesInterval<\/pre>\n
Das wars auch schon! Morgen packe ich noch eine Demo mit dazu. da k\u00f6nnt ihr euch dann den Source direkt anschauen. Canvas macht Laune!<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Ich habe bei den Musik-Animationen die ersten Erfahrungen mit dem Canvas-Element gesammelt, und ich muss sagen, ich bin sehr angetan. Das er\u00f6ffnet wirklich ungeahnte M\u00f6glichkeiten, und ich finde es wesentlich eing\u00e4nginger und intuitiver zu bedienen als CSS-Animationen, wo man sich ja ewig mit der Cross-Browser-Kompatibilit\u00e4t herumschlagen muss. Canvas wird von den meisten g\u00e4ngigen modernen Browsern […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[11,47,66,63],"tags":[],"_links":{"self":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1566"}],"collection":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/comments?post=1566"}],"version-history":[{"count":2,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1566\/revisions"}],"predecessor-version":[{"id":1569,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/posts\/1566\/revisions\/1569"}],"wp:attachment":[{"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/media?parent=1566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/categories?post=1566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/evileu.de\/zum-schwarzen-pinguin\/wp-json\/wp\/v2\/tags?post=1566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}