HTML 5 Canvas example<\/title>\r\n <script type=\"text\/javascript\">\r\n var x = 50;\r\n var y = 50;\r\n var dx = 1;\r\n var dy = 1;\r\n\r\n var myCanvas;\r\n var myContext;\r\n\r\n var pelota;\r\n var fondo;\r\n\r\n var main = function() {\r\n \/\/ Se inicializa el canvas\r\n myCanvas = document.getElementById(\"mycanvas\");\r\n myContext = myCanvas.getContext(\"2d\");\r\n\r\n \/\/ Se cogen los elementos de imagen para pintar\r\n pelota = document.getElementById(\"pelota\");\r\n fondo = document.getElementById(\"fondo\");\r\n \r\n \/\/ Se pinta el fondo y la pelota en el canvas\r\n myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);\r\n myContext.drawImage(pelota, x, y);\r\n\r\n window.setInterval(\"moverPelota()\", 10);\r\n };\r\n\r\n var moverPelota = function() {\r\n if ((x > myCanvas.width - pelota.width) || (x < 0)) {\r\n dx = -dx;\r\n }\r\n \r\n if ((y > myCanvas.height - pelota.height) || (y < 0)) {\r\n dy = -dy;\r\n }\r\n\r\n x += dx;\r\n y += dy;\r\n\r\n myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);\r\n myContext.drawImage(pelota, x, y);\r\n };\r\n \r\n <\/script>\r\n <style type=\"text\/css\">\r\n canvas { border: 2px solid black; }\r\n canvas#mycanvas { width: 320px; height: 170px; }\r\n img { display: none; }\r\n <\/style>\r\n <\/head>\r\n <body onload=\"main();\">\r\n \r\n <canvas id=\"mycanvas\">\r\n Aqu\u00ed deber\u00eda de aparecer un bal\u00f3n rebotando.\r\n <\/canvas>\r\n\r\n <img loading=\"lazy\" id=\"pelota\" src=\"pelota.png\" width=\"49px\" height=\"49px\" \/>\r\n <img loading=\"lazy\" id=\"fondo\" src=\"fondo.jpg\" width=\"320px\" height=\"170px\" \/>\r\n \r\n <\/body>\r\n<\/html>\r\n<\/pre>\n<p>El resultado puede verse en la <a href=\"http:\/\/nauj27.com\/html5\/canvas.html\">web del ejemplo de uso de canvas<\/a>.<\/p>\n<p>Las im\u00e1genes se precargan ocultas (con display: none) porque seg\u00fan la <a href=\"http:\/\/dev.w3.org\/html5\/2dcontext\/#images\">especificaci\u00f3n del HTML5<\/a> si la imagen no ha sido completamente cargada no se pintar\u00e1 nada. Carg\u00e1ndolas de este modo nos aseguramos de que se han le\u00eddo completamente antes de su uso en el canvas.<\/p>\n<p>Las pruebas las he realizado sobre Mozilla Firefox 4.0 Beta 7. En cualquier navegador que implemente canvas sobre html5 deber\u00eda de representarse correctamente. Entre estos navegadores se incluyen Safari, Opera o Chrome. Si eres usuario de Internet Explorer \u00bfa qu\u00e9 esperas para cambiar a un navegador real?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Me he decidido a echarle un vistazo al HTML5 y a la representaci\u00f3n de una superficie Canvas para dibujar en 2D. Este tipo de superficie permitir\u00e1 en un futuro que ya est\u00e1 aqu\u00ed hacer juegos para la web en HTML real que se puedan usar en cualquier dispositivo sin necesidad de complementos de terceros, l\u00e9ase […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,34],"tags":[179,202,180,203],"_links":{"self":[{"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/837"}],"collection":[{"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=837"}],"version-history":[{"count":20,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/837\/revisions"}],"predecessor-version":[{"id":856,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/837\/revisions\/856"}],"wp:attachment":[{"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":837,"date":"2010-12-10T01:06:57","date_gmt":"2010-12-09T23:06:57","guid":{"rendered":"http:\/\/192.168.1.2:8080\/?p=837"},"modified":"2010-12-10T01:17:12","modified_gmt":"2010-12-09T23:17:12","slug":"html5-canvas","status":"publish","type":"post","link":"https:\/\/nauj27.com\/blog\/?p=837","title":{"rendered":"HTML5 Canvas"},"content":{"rendered":"

Me he decidido a echarle un vistazo al HTML5<\/a> y a la representaci\u00f3n de una superficie Canvas para dibujar en 2D<\/a>. Este tipo de superficie permitir\u00e1 en un futuro que ya est\u00e1 aqu\u00ed hacer juegos para la web en HTML real que se puedan usar en cualquier dispositivo sin necesidad de complementos de terceros, l\u00e9ase Adobe Flash.<\/p>\n

La verdadera utilidad y potencia es poder dibujar en tiempo real sobre la superficie y a provechar todas las caracter\u00edsticas de dibujo que nos proporciona, cosas que no he usado en mi ejercicio particular. Sin embargo me ha servido como introducci\u00f3n al uso de canvas en HTML y aqu\u00ed queda como ejemplo:<\/p>\n

\r\n\r\n  \r\n    HTML 5 Canvas example<\/title>\r\n    <script type=\"text\/javascript\">\r\n        var x = 50;\r\n        var y = 50;\r\n        var dx = 1;\r\n        var dy = 1;\r\n\r\n        var myCanvas;\r\n        var myContext;\r\n\r\n        var pelota;\r\n        var fondo;\r\n\r\n        var main = function() {\r\n            \/\/ Se inicializa el canvas\r\n            myCanvas = document.getElementById(\"mycanvas\");\r\n            myContext = myCanvas.getContext(\"2d\");\r\n\r\n            \/\/ Se cogen los elementos de imagen para pintar\r\n            pelota = document.getElementById(\"pelota\");\r\n            fondo = document.getElementById(\"fondo\");\r\n        \r\n            \/\/ Se pinta el fondo y la pelota en el canvas\r\n            myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);\r\n            myContext.drawImage(pelota, x, y);\r\n\r\n            window.setInterval(\"moverPelota()\", 10);\r\n        };\r\n\r\n        var moverPelota = function() {\r\n            if ((x > myCanvas.width - pelota.width) || (x < 0)) {\r\n                dx = -dx;\r\n            }\r\n            \r\n            if ((y > myCanvas.height - pelota.height) || (y < 0)) {\r\n                dy = -dy;\r\n            }\r\n\r\n            x += dx;\r\n            y += dy;\r\n\r\n            myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);\r\n            myContext.drawImage(pelota, x, y);\r\n        };\r\n        \r\n    <\/script>\r\n    <style type=\"text\/css\">\r\n      canvas { border: 2px solid black; }\r\n      canvas#mycanvas { width: 320px; height: 170px; }\r\n      img { display: none; }\r\n    <\/style>\r\n  <\/head>\r\n  <body onload=\"main();\">\r\n \r\n    <canvas id=\"mycanvas\">\r\n        Aqu\u00ed deber\u00eda de aparecer un bal\u00f3n rebotando.\r\n    <\/canvas>\r\n\r\n    <img loading=\"lazy\" id=\"pelota\" src=\"pelota.png\" width=\"49px\" height=\"49px\" \/>\r\n    <img loading=\"lazy\" id=\"fondo\" src=\"fondo.jpg\" width=\"320px\" height=\"170px\" \/>\r\n \r\n  <\/body>\r\n<\/html>\r\n<\/pre>\n<p>El resultado puede verse en la <a href=\"http:\/\/nauj27.com\/html5\/canvas.html\">web del ejemplo de uso de canvas<\/a>.<\/p>\n<p>Las im\u00e1genes se precargan ocultas (con display: none) porque seg\u00fan la <a href=\"http:\/\/dev.w3.org\/html5\/2dcontext\/#images\">especificaci\u00f3n del HTML5<\/a> si la imagen no ha sido completamente cargada no se pintar\u00e1 nada. Carg\u00e1ndolas de este modo nos aseguramos de que se han le\u00eddo completamente antes de su uso en el canvas.<\/p>\n<p>Las pruebas las he realizado sobre Mozilla Firefox 4.0 Beta 7. En cualquier navegador que implemente canvas sobre html5 deber\u00eda de representarse correctamente. Entre estos navegadores se incluyen Safari, Opera o Chrome. Si eres usuario de Internet Explorer \u00bfa qu\u00e9 esperas para cambiar a un navegador real?<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Me he decidido a echarle un vistazo al HTML5 y a la representaci\u00f3n de una superficie Canvas para dibujar en 2D. Este tipo de superficie permitir\u00e1 en un futuro que ya est\u00e1 aqu\u00ed hacer juegos para la web en HTML real que se puedan usar en cualquier dispositivo sin necesidad de complementos de terceros, l\u00e9ase […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[17,34],"tags":[179,202,180,203],"_links":{"self":[{"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/837"}],"collection":[{"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=837"}],"version-history":[{"count":20,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/837\/revisions"}],"predecessor-version":[{"id":856,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/837\/revisions\/856"}],"wp:attachment":[{"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=837"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=837"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nauj27.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=837"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}