{"id":670,"date":"2014-06-08T01:38:40","date_gmt":"2014-06-07T23:38:40","guid":{"rendered":"https:\/\/vielhuber.de\/?p=670"},"modified":"2020-07-03T01:57:05","modified_gmt":"2020-07-02T23:57:05","slug":"animierte-hintergruende-mit-canvas","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/","title":{"rendered":"Animierte Hintergr\u00fcnde mit Canvas"},"content":{"rendered":"<p>Animierte Vektor-Hintergr\u00fcnde k\u00f6nnen Abwechslung in eine von Fullscreen-Fotos und -Videos gepr\u00e4gte Weblandschaft bringen. Sch\u00f6n w\u00e4re, wenn Ladezeiten sowie eine breite Unterst\u00fctzung von Hard- und Software damit einhergehen. Eine L\u00f6sung lautet: Canvas. Das durch JavaScript gesteuerte HTML-Element wird von allen aktuellen Browsern unterst\u00fctzt sowie auf mobilen Ger\u00e4ten performant wiedergegeben.<\/p>\n<p><!--more--><\/p>\n<p>Die wahre St\u00e4rke liegt daran, dass die Leinwand (engl. canvas) nur durch Code bef\u00fcllt wird \u2013 und sich damit als netter Nebeneffekt ganz neue M\u00f6glichkeiten auftun: Beispielsweise k\u00f6nnen durch rekursive Funktionen Fraktale oder andere wiederkehrende Elemente ohne gro\u00dfen Aufwand erzeugt werden. Wie das Ganze aussehen kann, habe ich hier in einer kleinen Demo aufbereitet:<\/p>\n<p><a class=\"notranslate\" href=\"https:\/\/vielhuber.de\/playground\/canvas-background\/\" target=\"_blank\" rel=\"noopener noreferrer\"><img decoding=\"async\" class=\"image aligncenter\" src=\"https:\/\/vielhuber.de\/wp-content\/uploads\/canvas.jpg\" alt=\"Canvas Background by David Vielhuber\" \/><\/a><\/p>\n<p>Canvas kann freilich auch Einsatz in Spielen, Werbung, Datenvisualisierung oder Kunst finden. In Zeiten von 4k und stufenlos skalierbaren Webseiten schlummert meiner Meinung nach viel Potential in dieser eher weniger bekannten Technik. In Kombination mit statischen SVG-Elementen bekommen vektorbasierte Grafiken nun auch im Web endlich die B\u00fchne, die sie seit jeher verdienen.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Animierte Vektor-Hintergr\u00fcnde k\u00f6nnen Abwechslung in eine von Fullscreen-Fotos und -Videos gepr\u00e4gte Weblandschaft bringen. Sch\u00f6n w\u00e4re, wenn Ladezeiten sowie eine breite Unterst\u00fctzung von Hard- und Software damit einhergehen. Eine L\u00f6sung lautet: Canvas. Das durch JavaScript gesteuerte HTML-Element wird von allen aktuellen Browsern unterst\u00fctzt sowie auf mobilen Ger\u00e4ten performant wiedergegeben.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-670","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"<title>Animierte Hintergr\u00fcnde mit Canvas &#060; Vielhuber David<\/title>\n<meta name=\"description\" content=\"Animierte Vektor-Hintergr\u00fcnde k\u00f6nnen Abwechslung in eine von Fullscreen-Fotos und -Videos gepr\u00e4gte Weblandschaft bringen. Sch\u00f6n w\u00e4re, wenn Ladeze...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animierte Hintergr\u00fcnde mit Canvas &#060; Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Animierte Vektor-Hintergr\u00fcnde k\u00f6nnen Abwechslung in eine von Fullscreen-Fotos und -Videos gepr\u00e4gte Weblandschaft bringen. Sch\u00f6n w\u00e4re, wenn Ladezeiten\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2014-06-07T23:38:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-07-02T23:57:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/canvas.jpg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Animierte Hintergr\u00fcnde mit Canvas\",\"datePublished\":\"2014-06-07T23:38:40+00:00\",\"dateModified\":\"2020-07-02T23:57:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/\"},\"wordCount\":173,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"image\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/canvas.jpg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/\",\"name\":\"Animierte Hintergr\u00fcnde mit Canvas &#060; Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/canvas.jpg\",\"datePublished\":\"2014-06-07T23:38:40+00:00\",\"dateModified\":\"2020-07-02T23:57:05+00:00\",\"description\":\"Animierte Vektor-Hintergr\u00fcnde k\u00f6nnen Abwechslung in eine von Fullscreen-Fotos und -Videos gepr\u00e4gte Weblandschaft bringen. Sch\u00f6n w\u00e4re, wenn Ladezeiten\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/#primaryimage\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/canvas.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/canvas.jpg\",\"width\":600,\"height\":319},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/animierte-hintergruende-mit-canvas\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animierte Hintergr\u00fcnde mit Canvas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Animierte Hintergr\u00fcnde mit Canvas &#060; Vielhuber David","description":"Animierte Vektor-Hintergr\u00fcnde k\u00f6nnen Abwechslung in eine von Fullscreen-Fotos und -Videos gepr\u00e4gte Weblandschaft bringen. Sch\u00f6n w\u00e4re, wenn Ladeze...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/","og_locale":"de_DE","og_type":"article","og_title":"Animierte Hintergr\u00fcnde mit Canvas &#060; Vielhuber David","og_description":"Animierte Vektor-Hintergr\u00fcnde k\u00f6nnen Abwechslung in eine von Fullscreen-Fotos und -Videos gepr\u00e4gte Weblandschaft bringen. Sch\u00f6n w\u00e4re, wenn Ladezeiten","og_url":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/","og_site_name":"Vielhuber David","article_published_time":"2014-06-07T23:38:40+00:00","article_modified_time":"2020-07-02T23:57:05+00:00","og_image":[{"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/canvas.jpg","type":"","width":"","height":""}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Animierte Hintergr\u00fcnde mit Canvas","datePublished":"2014-06-07T23:38:40+00:00","dateModified":"2020-07-02T23:57:05+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/"},"wordCount":173,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"image":{"@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/#primaryimage"},"thumbnailUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/canvas.jpg","articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/","url":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/","name":"Animierte Hintergr\u00fcnde mit Canvas &#060; Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/#primaryimage"},"image":{"@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/#primaryimage"},"thumbnailUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/canvas.jpg","datePublished":"2014-06-07T23:38:40+00:00","dateModified":"2020-07-02T23:57:05+00:00","description":"Animierte Vektor-Hintergr\u00fcnde k\u00f6nnen Abwechslung in eine von Fullscreen-Fotos und -Videos gepr\u00e4gte Weblandschaft bringen. Sch\u00f6n w\u00e4re, wenn Ladezeiten","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/#primaryimage","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/canvas.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/canvas.jpg","width":600,"height":319},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/animierte-hintergruende-mit-canvas\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Animierte Hintergr\u00fcnde mit Canvas"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/posts\/670","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/comments?post=670"}],"version-history":[{"count":3,"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/posts\/670\/revisions"}],"predecessor-version":[{"id":2717,"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/posts\/670\/revisions\/2717"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/media?parent=670"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/categories?post=670"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/vi\/wp-json\/wp\/v2\/tags?post=670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}