{"id":28,"date":"2016-01-02T01:58:09","date_gmt":"2016-01-02T00:58:09","guid":{"rendered":"http:\/\/js.wp.w3.pt\/?p=28"},"modified":"2016-01-09T12:10:44","modified_gmt":"2016-01-09T11:10:44","slug":"raio-de-luz","status":"publish","type":"post","link":"http:\/\/js.w3.pt\/?p=28","title":{"rendered":"Raio de luz"},"content":{"rendered":"<p>Um raio de luz parte do canto inferior esquerdo do ecr\u00e3, com um \u00e2ngulo de 45\u00ba. Quando colide com o c\u00edrculo, o c\u00edrculo muda de cor. Assim que o raio atinge o limite do canvas, o processo \u00e9 reiniciado.<\/p>\n<p>O per\u00edodo de atualiza\u00e7\u00e3o do canvas \u00e9 de 20ms. A fun\u00e7\u00e3o <strong>eval<\/strong> \u00e9 usada para transformar a largura e altura do canvas em valores num\u00e9ricos, caso contr\u00e1rio o programa v\u00ea-as como texto e as adi\u00e7\u00f5es sobre a vari\u00e1vel <strong>y<\/strong> s\u00e3o concatena\u00e7\u00f5es de texto.<\/p>\n<p>Visualiza\u00e7\u00e3o:<br \/>\n<iframe loading=\"lazy\" width=\"640\" height=\"420\" src=\"http:\/\/js.w3.pt\/codigo\/js\/trab4.html\"><\/iframe><\/p>\n<pre>\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html&gt;\r\n&lt;head&gt;\r\n&lt;title&gt;Gr\u00e1fico&lt;\/title&gt;\r\n&lt;meta charset=\"iso-8859-1\"&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n\r\nvar xc = 350;\t\/\/ centro do c\u00edrculo\r\nvar yc = 150;\r\nvar r = 80;\t\/\/ raio do c\u00edrculo\r\nvar ang = 45;\t\/\/ \u00e2ngulo do raio de luz em graus\r\n\r\n\/\/ Incrementos para o raio de luz\r\nvar incx = Math.cos(ang*Math.PI\/180);\r\nvar incy = -Math.sin(ang*Math.PI\/180);\r\n\r\nvar x, y;\t\/\/ coordenadas do ponto cintilante\r\n\r\nvar ctx;\r\n\r\nvar larg, alt;\r\n\r\nfunction init() {\r\n\tvar c = document.getElementById(\"cvs\");\r\n\tctx = c.getContext(\"2d\");\r\n\tctx.lineWidth = 3;\r\n\tlarg = eval( c.getAttribute(\"width\") );\r\n\talt = eval( c.getAttribute(\"height\") );\r\n\tx = 0;\r\n\ty = alt;\r\n\tvar periodoRelogio = 20;\r\n\tsetInterval(\"anima()\", periodoRelogio);\r\n}\r\n\r\nfunction anima() {\r\n\t\/\/ Desenhar\r\n\tctx.fillStyle = \"black\";\r\n\tctx.beginPath();\r\n\tctx.rect(0,0,larg,alt);\r\n\tctx.fill();\r\n\r\n\t\/\/ Se a dist\u00e2ncia de (x,y) a (xc,yc) for inferior a r, ent\u00e3o\r\n\t\/\/ muda de cor\r\n\r\n\tvar d = Math.sqrt(Math.pow(x-xc,2)+Math.pow(y-yc,2));\r\n\tif(d&lt;r)\r\n\t\tctx.fillStyle = \"#FF8040\";\r\n\telse\r\n\t\tctx.fillStyle = \"#FF0000\";\r\n\r\n\tctx.beginPath();\r\n\tctx.arc(xc,yc,r,0,2*Math.PI);\r\n\tctx.fill();\r\n\t\r\n\r\n\tx += incx;\r\n\ty += incy;\r\n\r\n\t\/\/ctx.fillStyle = \"#FFFF20\";\r\n\t\/\/ctx.beginPath();\r\n\t\/\/ctx.arc(x,y,5,0,2*Math.PI);\r\n\t\/\/ctx.fill();\r\n\tpoeLinha(0,alt,x,y,\"#FFFF20\");\r\n\r\n\t\/\/ Quando sai do canvas, volta ao in\u00edcio\r\n\tif(y&lt;0 || x&gt;larg) {\r\n\t\tx = 0;\r\n\t\ty = alt;\r\n\t}\r\n\r\n}\r\n\r\n\r\nfunction poeLinha(x1,y1,x2,y2,cor) {\r\n\tctx.strokeStyle = cor;\r\n\tctx.beginPath();\r\n\tctx.moveTo(x1,y1);\r\n\tctx.lineTo(x2,y2);\r\n\tctx.stroke();\r\n}\r\n\r\n&lt;\/script&gt;\r\n\r\n\r\n&lt;\/head&gt;\r\n&lt;body onload=\"init();\"&gt;\r\n&lt;canvas width=\"600\" height=\"400\" id=\"cvs\"&gt;&lt;\/canvas&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Um raio de luz parte do canto inferior esquerdo do ecr\u00e3, com um \u00e2ngulo de 45\u00ba. Quando colide com o c\u00edrculo, o c\u00edrculo muda de cor. Assim que o raio atinge o limite do canvas, o processo \u00e9 reiniciado. O per\u00edodo de atualiza\u00e7\u00e3o do canvas \u00e9 de 20ms. A fun\u00e7\u00e3o eval \u00e9 usada para transformar [&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],"tags":[],"_links":{"self":[{"href":"http:\/\/js.w3.pt\/index.php?rest_route=\/wp\/v2\/posts\/28"}],"collection":[{"href":"http:\/\/js.w3.pt\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/js.w3.pt\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/js.w3.pt\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/js.w3.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=28"}],"version-history":[{"count":8,"href":"http:\/\/js.w3.pt\/index.php?rest_route=\/wp\/v2\/posts\/28\/revisions"}],"predecessor-version":[{"id":90,"href":"http:\/\/js.w3.pt\/index.php?rest_route=\/wp\/v2\/posts\/28\/revisions\/90"}],"wp:attachment":[{"href":"http:\/\/js.w3.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=28"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/js.w3.pt\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=28"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/js.w3.pt\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=28"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}