2 - Juegos Multimedia HTML5 - Crear espacio de trabajo y profundizar en el canvas

Tras una pequeña introducción al curso, en el vídeo de hoy habilitaremos un espacio de trabajo en el cual incluiremos las prácticas que iremos realizando a lo largo del curso. Nosotros, en los videotutoriales, utilizaremos el IDE NetBeans (lo puedes descargar de forma gratuita desde su página web) debido a lo cómodo que nos resulta, pues lo utilizamos también para Java y C. Tú puedes seguir el curso con cualquier otro editor de código. De hecho, en capítulos más avanzados del curso cambiaremos de editor de código a Sublime Text, así que usa el que más te guste a ti.
Después de ello pasaremos a explicar con detalle el ejemplo del primer videotutorial del curso, la página en la cual pintábamos un cuadrado naranja con la ayuda del elemento canvas. Además le añadiremos alguna característica más que nos permita detectar y avisar al usuario en el caso de que no tenga activado el JavaScript o que su navegador no soporte el elemento canvas de HTML5.



El código del archivo se encuentra a continuación. Además, como en todos los capítulos, podrás ver aquí el ejemplo funcionando.
<!DOCTYPE html>
<html>
  <head>
    <title>Canvas</title>
    <meta charset="UTF-8" />
    <script>
        window.onload = function () {
            if (hayCanvas()) {
                var canvas = document.querySelector("canvas");
                canvas.width = 400;
                canvas.height = 400;
                var context = canvas.getContext("2d");
                context.fillStyle = "#F91";
                context.fillRect(0, 0, 400, 400);
            } else {
                alert("Tu navegador no soporta canvas");
            }
        }
        
        function hayCanvas() {
            var elem = document.createElement('canvas');
            return !!(elem.getContext && elem.getContext('2d'));
        }
    </script>
  </head>
  <body>
      <noscript>
        No tiene habilitado JavaScript. Debería habilitarlo para
        poder disfrutar al completo de los contenidos de esta página.
      </noscript>
      <div>
          <canvas style="width: 400px; height: 200px">
              Tu navegador no soporta el elemento
              <code>canvas</code> de HTML5.
          </canvas>
      </div>
  </body>
</html>

Para el que quiera profundizar en el trabajo con el canvas antes de seguir con el curso podría verse estos videotutoriales de Jesús Conde:


Capítulo número 3 del curso.

Índice del curso

4 comentarios :

  1. Geniales tus explicaciones, gracias por compartirlas, un saludo, Juan Manuel.

    ResponderEliminar
    Respuestas
    1. Gracias a ti, espero que disfrutes todavía más con los siguiente vídeos del curso :)

      Eliminar
  2. Muy bueno muchas gracias!!!!!

    ResponderEliminar
  3. Una cosa al abrir el netbeans no me sale la carpeta PHP hay que descargarsela o algo así??

    ResponderEliminar