HTML5 Canvas

Enviado 10th diciembre, 2010 por nauj27

Me he decidido a echarle un vistazo al HTML5 y a la representación de una superficie Canvas para dibujar en 2D. Este tipo de superficie permitirá en un futuro que ya está aquí hacer juegos para la web en HTML real que se puedan usar en cualquier dispositivo sin necesidad de complementos de terceros, léase Adobe Flash.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<html>
  <head>
    <title>HTML 5 Canvas example</title>
    <script type="text/javascript">
        var x = 50;
        var y = 50;
        var dx = 1;
        var dy = 1;
 
        var myCanvas;
        var myContext;
 
        var pelota;
        var fondo;
 
        var main = function() {
            // Se inicializa el canvas
            myCanvas = document.getElementById("mycanvas");
            myContext = myCanvas.getContext("2d");
 
            // Se cogen los elementos de imagen para pintar
            pelota = document.getElementById("pelota");
            fondo = document.getElementById("fondo");
 
            // Se pinta el fondo y la pelota en el canvas
            myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);
            myContext.drawImage(pelota, x, y);
 
            window.setInterval("moverPelota()", 10);
        };
 
        var moverPelota = function() {
            if ((x > myCanvas.width - pelota.width) || (x < 0)) {
                dx = -dx;
            }
 
            if ((y > myCanvas.height - pelota.height) || (y < 0)) {
                dy = -dy;
            }
 
            x += dx;
            y += dy;
 
            myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);
            myContext.drawImage(pelota, x, y);
        };
 
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
      canvas#mycanvas { width: 320px; height: 170px; }
      img { display: none; }
    </style>
  </head>
  <body onload="main();">
 
    <canvas id="mycanvas">
        Aquí debería de aparecer un balón rebotando.
    </canvas>
 
    <img id="pelota" src="pelota.png" width="49px" height="49px" />
    <img id="fondo" src="fondo.jpg" width="320px" height="170px" />
 
  </body>
</html>

El resultado puede verse en la web del ejemplo de uso de canvas.

Las imágenes se precargan ocultas (con display: none) porque según la especificación del HTML5 si la imagen no ha sido completamente cargada no se pintará nada. Cargándolas de este modo nos aseguramos de que se han leído completamente antes de su uso en el canvas.

Las pruebas las he realizado sobre Mozilla Firefox 4.0 Beta 7. En cualquier navegador que implemente canvas sobre html5 debería de representarse correctamente. Entre estos navegadores se incluyen Safari, Opera o Chrome. Si eres usuario de Internet Explorer ¿a qué esperas para cambiar a un navegador real?

Etiquetas: , , ,

Archivado en:HTML, JavaScript

3 comentarios en “HTML5 Canvas”