{"id":2180,"date":"2016-12-02T16:02:28","date_gmt":"2016-12-02T14:02:28","guid":{"rendered":"http:\/\/wordpress.wvs-berlin.de\/?p=2180"},"modified":"2016-12-02T17:38:44","modified_gmt":"2016-12-02T15:38:44","slug":"2-12-2016","status":"publish","type":"post","link":"https:\/\/wordpress.wvs-berlin.de\/?p=2180","title":{"rendered":"2.12.2016"},"content":{"rendered":"<p>Michael ist da, Morten und Angelo. Wir versuchen, Schneeflocken mit Canvas zu machen. Robert baut mit Canvas eine Schneeflocke. S.a. http:\/\/localhost\/draw_circles.js.html bzw. http:\/\/stackoverflow.com\/questions\/11450030\/moving-text-inside-canvas-using-html5. Angelo und Michael machen was mit Logisim.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre style=\"font-size: .7em;\">   \r\n  \r\n HTML 5 Animated Text\r\n\u00a0\u00a0\u00a0 &lt;!--script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js\"&gt;&lt;\/script--&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var context;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var text = \"\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var textDirection =\"\";\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 window.onload = function()\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0DB=document.getElementsByTagName(\"body\")[0]\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 cvs = document.createElement(\"canvas\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 div = document.createElement(\"div\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 div.innerHTML = \"***\";\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 DB.appendChild(div);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 DB.appendChild(cvs);\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 \/\/~ cvs = document.getElementById(\"cvs\");\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 height = screen.height;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 width = screen.width;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 cvs.height = height;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 cvs.width\u00a0 = width;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 context = cvs.getContext(\"2d\");\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0startY = 5\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0startX = 580;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 interval = 50;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 pixelPerMove = 1;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 sinFactor = 5\/2;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 textYFactor = 0.5;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 text = \"*\"; \r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 snowFont = '30px _sans';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 snowColor = '#FF0000';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/~ context.textBaseline = 'top';\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 fillColor = '#2fa';\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0textYpos = startY;\r\n\u00a0\u00a0 \u00a0textXpos = startX;\r\n\u00a0\u00a0 \u00a0textXrunner = 0; \r\n\u00a0\u00a0 \u00a0textXincrement = 3;\r\n\u00a0\u00a0 \u00a0 canvasDrawHeight = height\/2;\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 setInterval(\"animate()\", interval);\r\n\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 \/\/~ alert(height);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }; \u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 function animate() {\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Clear screen\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 context.clearRect(0, 0, width, height);\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 context.globalAlpha = 1;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 context.fillStyle = fillColor;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 context.fillRect(0, 0, width, height);\u00a0\u00a0 \u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var metrics = context.measureText(text);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0\u00a0 var textWidth = metrics.width;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/~ if (textDirection == \"down\") {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 textYpos += pixelPerMove;\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0textXpos = textXpos + sinFactor*Math.sin(textYFactor*textYpos);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 if (textYpos &gt; canvasDrawHeight - textWidth) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/textDirection = \"left\";\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 textYpos\u00a0 = startY;\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\u00a0\u00a0\u00a0\u00a0 \/\/~ }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/~ else {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/~ textYpos -= 10;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/~ if (textYpos &lt; 10) {\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/~ textDirection = \"down\";\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\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/~ }\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 context.font = snowFont;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 context.fillStyle = snowColor;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/~ context.textBaseline = 'top';\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 context.fillText\u00a0 ( text, textXpos, textYpos);\u00a0\u00a0 \u00a0\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 &lt;\/script&gt;\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;!--\r\n\r\n&lt;div id=\"page\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;canvas id=\"cvs\" width=\"600\" height=\"600\"&gt;\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Your browser does not support the HTML 5 Canvas.\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 &lt;\/canvas&gt;\r\n&lt;\/div&gt;\r\n\r\n\r\n\u00a0\u00a0 \u00a0 --&gt;\r\n\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Michael ist da, Morten und Angelo. Wir versuchen, Schneeflocken mit Canvas zu machen. Robert baut mit Canvas eine Schneeflocke. S.a. http:\/\/localhost\/draw_circles.js.html bzw. http:\/\/stackoverflow.com\/questions\/11450030\/moving-text-inside-canvas-using-html5. Angelo und Michael machen was mit Logisim. &nbsp; &nbsp; HTML 5 Animated Text \u00a0\u00a0\u00a0 &lt;!&#8211;script src=&#8220;https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.2\/jquery.min.js&#8220;&gt;&lt;\/script&#8211;&gt; &lt;script type=&#8220;text\/javascript&#8220;&gt; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var context; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var text = &#8222;&#8220;; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var textDirection =&#8220;&#8220;; \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 window.onload [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,54,7,8],"tags":[],"class_list":["post-2180","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-canvas","category-termine","category-tisch"],"_links":{"self":[{"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=\/wp\/v2\/posts\/2180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2180"}],"version-history":[{"count":4,"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=\/wp\/v2\/posts\/2180\/revisions"}],"predecessor-version":[{"id":2184,"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=\/wp\/v2\/posts\/2180\/revisions\/2184"}],"wp:attachment":[{"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2180"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.wvs-berlin.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}