Espacio Daycry - Espacio de programación : HTML5

Mostrando entradas con la etiqueta HTML5. Mostrar todas las entradas

martes, 13 de octubre de 2015

Jquery - Tooltipster's plugin

No hay comentarios : Posted by daycry at 15:49 Labels: HTML , HTML5 , Javascript , Jquery , Tooltip , Tooltipster

Tooltipster es un plugin que nos permite animar nuestros tooltips de la aplicación web de forma elegante y animada.

Podemos descargar el código desde el siguiente enlace: Enlace

<head>
...

    <link rel="stylesheet" type="text/css" href="css/tooltipster.css" />

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.tooltipster.min.js"></script>

...
</head>

Integrar en el HTML

<img src="my-image.png" class="tooltip" title="This is my image's tooltip message!" />

<a class="ketchup tooltip" href="http://ejemplo.com/" title="This is my link's tooltip message!">Link</a>

<div class="tooltip" title="This is my div's tooltip message!">
   This div has a tooltip when you hover over it!
</div>

Activar Tooltipster

<head>

    ...

    <script>
        $(document).ready(function() {
            $('.tooltip').tooltipster();
        });
    </script>
</head>

Jquery - Contenedor de noticias

No hay comentarios : Posted by daycry at 16:37 Labels: css , HTML , HTML5 , Jquery , notícias

En este post vamos a explicar como podríamos tener un contenedor que se fuera actualizando con las últimas noticias, eventos, lo que sea.

Para empezar creamos un simple fichero css:

html, body {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 12px;
 line-height: 16px;
 padding: 0;
 margin: 0;
 color: #333;
}

a { color: #141478; text-decoration: none; }
a:hover { color: #0099ff; }

#page {
 width: 500px;
 margin: 0 auto;
 background-color: #FFF;
 margin-bottom: 50px;
}

h1, h2 {
 font-family: 'IM Fell DW Pica SC', Helvetica, Arial, sans-serif;
 font-weight: normal;
}

h1 {
 font-size: 35px;

}
.highlight {
 font-size: 50px;
 color: #0099ff;
}
h1, h2 {
 color: #333;
 text-align: center; 
}
h2{
 text-align: right;
 padding: 10px 0px;
}

.bar {
 background-color: #111;
 color: #f0f0f0;
 box-shadow: 0px 0px 2px #333;
 line-height: 25px;
 padding: 0px 20px;
}
.bar a {
 color: #DDD;
}
.bar a:hover {
 color: #FFFFFF;
}

.ticker {
 width: 500px;
 height: 40px;
 overflow: hidden;
 border: 1px solid #DDD;
 margin: 0;
 padding: 0;
 list-style: none;
 border-radius: 5px;
 box-shadow: 0px 0px 5px #DDD;
}

#ticker_02 {
 height: 120px;
}

.ticker li {
 height: 30px;
 border-bottom: 1px dotted #DDD;
 padding: 5px;
 margin: 0px 5px;
}

#ticker_04 {
 height: 150px;
}
#ticker_04 li {
 height: 40px;
 overflow: hidden;
} 
#ticker_04 img {
 float: left;
 height: 40px;
 width: 40px;
 margin-right: 10px;
} 

#example_4 { display: none;}

Seguidamente añadiriamos el código html dentro del body.

<div id="page">
 <h2>Example 01 [show only one news at the time]</h2>
 <ul id="ticker_01" class="ticker">
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 2
  </li>
  <li>
   Noticia número 3
  </li>
  <li>
   Noticia número 4
  </li>
 </ul>

 <h2>Example 02 [3 news always visible]</h2>
 <ul id="ticker_02" class="ticker">
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
 </ul>

 <h2>Example 03 [changing opacity of first news]</h2>
 <ul id="ticker_03" class="ticker">
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
  <li>
   Noticia número 1
  </li>
 </ul>

 <span id="example_4">
  <h2>Example 04 [live twitter data for #javascript]</h2>
  <ul id="ticker_04" class="ticker">
  </ul>
 </span>

</div>


<script>

 function tick(){
  $('#ticker_01 li:first').slideUp( function () { $(this).appendTo($('#ticker_01')).slideDown(); });
 }
 setInterval(function(){ tick () }, 5000);


 function tick2(){
  $('#ticker_02 li:first').slideUp( function () { $(this).appendTo($('#ticker_02')).slideDown(); });
 }
 setInterval(function(){ tick2 () }, 3000);


 function tick3(){
  $('#ticker_03 li:first').animate({'opacity':0}, 200, function () { $(this).appendTo($('#ticker_03')).css('opacity', 1); });
 }
 setInterval(function(){ tick3 () }, 4000); 

 function tick4(){
  $('#ticker_04 li:first').slideUp( function () { $(this).appendTo($('#ticker_04')).slideDown(); });
 }


 /**
  * USE TWITTER DATA
  */

  $.ajax ({
   url: 'http://search.twitter.com/search.json',
   data: 'q=%23javascript',
   dataType: 'jsonp',
   timeout: 10000,
   success: function(data){
    if (!data.results){
     return false;
    }

    for( var i in data.results){
     var result = data.results[i];
     var $res = $("<li />");
     $res.append('<img src="' + result.profile_image_url + '" />');
     $res.append(result.text);

     console.log(data.results[i]);
     $res.appendTo($('#ticker_04'));
    }
   setInterval(function(){ tick4 () }, 4000); 

   $('#example_4').show();

   }
 });


</script>

Se tiene que importar las librerías de Jquery en el html.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Jquery - Ramdom Color

No hay comentarios : Posted by daycry at 16:07 Labels: ColorRandom , HTML , HTML5 , Jquery , librerías

Esta es un librería para generar colores de forma aleatoria.

El código se puede obtener desde GitHub:
https://github.com/daycry/randomColor.git

La utilización es muy sencilla, y aquí os pongo un ejemplo:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>just.RandomColor demo - JavaScript random color generator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="just.RandomColor.js"></script>
   <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 15px;
            overflow: hidden;
            margin: 3px;
        }

        .box {
            width: 20px;
            height: 20px;
            float: left;
            margin: 1px;
        }

        .form {
            position: fixed;
            width: 200px;
            padding: 20px;
            right: 10px;
            top: 50px;
            left: 50%;
            margin-left: -120px;
            background-color: #fff;
            color: #333;
        }

        button,
        .link {
            background-color: #0099FF;
            color: #fff;
            width: 200px;
            line-height: 40px;
            font-size: 16px;
            border: none;
            display: block;
            text-align: center;
            text-decoration: none;
            padding: 0;
            margin-top: 10px;
            cursor: pointer;
        }


    </style>
</head>
<body>

    <div class="holder"></div>
    <div class="form">
        <button id="refresh">Refresh</button>
    </div>

    <script>

    var total;

    function init () {

        var width = $(document).width(),
            height = $(document).height(),
            size = 20,
            x = width / size,
            y = height / size;
        total = x * y;
        
        if (total > 2500) {
            total = 2500;
        }

        draw();

    }

    function draw () {

        var c = new just.RandomColor();

        $('.holder').html('');

        for (var i = 0; i < total; i++) {
        
            $('.holder').append($('<div />').addClass('box').css('background-color', c.refresh().toCSS()));

        }

    }

    $('#refresh').click( function () {
        draw();
    });

    init();

    </script>

</body>
</html>

Jquery - Coin Slider

No hay comentarios : Posted by daycry at 15:37 Labels: Coin Slider , galería , HTML , HTML5 , imágenes , Javascript , Jquery , librerías

Este plugin es realmente útil para generar animaciones en las transiciones de las imágenes dentro de un contenedor.

El plugin se puede descargar desde el siguiente link:
http://workshop.rs/projects/coin-slider/

Para integrarlo en nuestra página web es realmente sencillo:

Añadimos las referencias de nuestros ficheros en el HTML

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/coin-slider.min.js"></script>
<link rel="stylesheet" type="text/css" href="../js/coin-slider-styles.css" />

Seguidamente creamos un contenedor que contendrá todas las imágenes que quedamos añadir al slider.

<div class="animacion" id="animacion">
<img src="../img/foto1.jpg" width="600" height="450" />
<img src="../img/foto2.jpg" width="600" height="450" />
<img src="../img/foto3.jpg" width="600" height="450" />
<img src="../img/foto4.jpg" width="600" height="450" />
<img src="../img/foto5.jpg" width="600" height="450" />
</div>

Aunque no es imprescindible, es mejor que las imágenes estén ocultas (style="display:none;") y Coin Slider se encargará de mostrarlas.

Como último paso habrá que aplicar al contenedor "animacion" el plugin.

<script type="text/javascript">
$(document).ready(function(){
 $('#animacion').coinslider();
});
</script>

Jquery - Fancy Box

No hay comentarios : Posted by daycry at 9:57 Labels: Fancy Box , galería , HTML , HTML5 , imágenes , Javascript , Jquery , librerías , web

Fancy Box una librería js con el que podemos abrir imágenes, páginas web, vídeos, o lo que se nos ocurra, de forma muy elegante, en ventanas tipo Popup, con jQuery.
Esta librería la podemos descargar desde la siguiente página web: Enlace

<script type="text/javascript" src="../js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../js/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" type="text/css" href="../js/jquery.fancybox.css" />

<!-- Para disponer de nuevas transiciones -->
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

<!-- Para navegar entre los elementos de la galería-->
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

<!-- css -->
<link href="/fancybox/jquery.fancybox-1.3.4.css" media="screen" rel="stylesheet" type="text/css"></link>

Para hacerlo funcionar solo tenemos que indicar un "id" o "class" a nuestros enlaces para aplicar la librería fancy Box sobre estos elementos.

En este caso hemos utilizado el enlace con clase class="fancyExample" sobre una imagen que vamos a ampliar. Mostramos la imagen en pequeño (foto1p.jpg) y vamos a ampliar la imagen (foto1.jpg) que fancyBox coge automáticamente del "href" del enlace:

<a class="fancyExample" href="../img/foto1.jpg" title="Imagen simple"><img src="../img/foto1p.jpg" width="200" height="150" /></a>

Ahora aplicamos la librería fancy Box a la clase que hemos creado.

<script type="text/javascript">
$(document).ready(function(){
 $(".fancyExample").fancybox({ });
});
</script>

En este otro ejemplo vamos a abrir una página web externa en HTML, primero preparamos el enlace:

<a class="fancyExample" href="ejemplo.html">Abrir página web externa - ejemplo.html</a>

<script type="text/javascript">
$(document).ready(function(){
 $(".fancyExample").fancybox({
  'autoScale'  : false,
  'transitionIn'  : 'none',
  'transitionOut'  : 'none',
  'width'   : 680,
  'height'  : 450,
  'type'   : 'iframe'
 });
});
</script>

En la página web existe mucha documentación sobre como personalizar la librería según nuestras necesidades, ya que es personalizable al 100% de forma sencilla

Jquery - Comprobar checked Input Radio

No hay comentarios : Posted by daycry at 10:37 Labels: HTML , HTML5 , Javascript , Jquery , radio

Vamos a comprobar con un botón el estado del radio, si está checked o no

Este ejemplo está creado con un botón que al hacer "click" en él ejecuta la comprobación:

$(document).ready(function(){

 $("#comprobar").click(function() {
  if($("#radio").is(':checked')) {
   alert("Está activado");
  } else {
   alert("No está activado");
  }
 });

});

El HTML del botón es el siguiente:

<input name="comprobar" id="comprobar" type="button" value="Comprobar" />

También sería posible desactivar el radio seteando a "false" el atributo checked.

$(document).ready(function(){

 $("#activar").click(function() {
  $("#radio").attr('checked', true);
 });

 $("#desactivar").click(function() {
  $("#radio").attr('checked', false);
 });

});

Quedando el HTML de estos eventos de la siguiente manera:

<input name="activar" id="activar" type="button" value="Activar" />  
<input name="desactivar" id="desactivar" type="button" value="Desactivar" />

Bootstrap3 - Editar contenido ventana modal

No hay comentarios : Posted by daycry at 17:53 Labels: Bootstrap , HTML , HTML5 , Javascript , Jquery

Con este sencillo ejemplo podemos editar el contenido de una ventana modal de forma dinámica:

HTML:

<p>Link 1</p>
<a data-toggle="modal" data-id="ISBN564541" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<p>&nbsp;</p>


<p>Link 2</p>
<a data-toggle="modal" data-id="ISBN-001122" title="Add this item" class="open-AddBookDialog btn btn-primary" href="#addBookDialog">test</a>

<div class="modal hide" id="addBookDialog">
 <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
    <div class="modal-body">
        <p>some content</p>
        <input type="text" name="bookId" id="bookId" value=""/>
    </div>
</div>

JS:

$(document).on("click", ".open-AddBookDialog", function () {
     var myBookId = $(this).data('id');
     $(".modal-body #bookId").val( myBookId );
});

HTML5 - Canvas Usar imágenes

No hay comentarios : Posted by daycry at 12:59 Labels: HTML , HTML5

Importación de imágenes

La importación de imágenes es básicamente un proceso que consta de dos pasos:

En primer lugar, necesitamos una referencia a un objeto JavaScript Image u otro elemento canvas como fuente. No es posible utilizar las imágenes con sólo proporcionar una URL o ruta de acceso a ellos.

En segundo lugar, dibujamos la imagen en el lienzo con la función drawImage.

Vamos a ver el paso uno primero. Básicamente, existen cuatro opciones disponibles:

Usar imágenes que están en la misma página

Podemos acceder a todas las imágenes de una página utilizando la colección document.images, el método document.getElementsByTagName , o si sabemos el atributo ID de la imagen, el método document.getElementById.

Usar otros elementos canvas

Al igual que con las imágenes normales, podemos tener acceso a otros elementos de canvas utilizando el método document.getElementsByTagName o el método document.getElementById. Asegúrate de que has dibujado algo en el lienzo de origen antes de utilizarlo en el lienzo de destino.

Uno de los usos más prácticos de esto sería utilizar un segundo elemento canvas como una vista en miniatura del otro lienzo más grande.

Creación de una imagen desde cero

Otra opción es crear nuevos objetos Image en nuestro script.

Básicamente para crear una nuevo objeto de imagen, hacemos lo siguiente:

var img = new Image (); / / Crear un nuevo objeto de imagen (Image)
img.src = 'myImage.png'; / / Establecer la ruta de origen

Cuando este script se ejecuta, la imagen comienza a cargar. Si intentas llamar a drawImage antes de que la imagen haya terminado de cargar, se iniciará Gecko 1.9.2 y versiones anteriores mientras que, en silencio, en Gecko 2.0 y posteriores, no hará nada. Así que debes utilizar un controlador de eventos onload:

var img = new Image (); / / Crear un nuevo objeto de imagen (Image)
img.onload = function () {
  / / Ejecutar instrucciones drawImage aquí
}
img.src = 'myImage.png'; / / Establecer la ruta de origen

Si sólo estás utilizando una imagen externa, éste puede ser un buen método, pero cuando tengas que realizar un seguimiento a más de una, tendremos que recurrir a algo más astuto. Está más allá del alcance de este tutorial abordar las tácticas de precarga de imagen, pero puedes echar un vistazo a JavaScript Image Preloader para obtener una solución completa.

Incrustación de una imagen a través de data: url

Otra forma posible de incluir imágenes es a través de las data: URL . Las URL de datos permiten definir completamente una imagen como una cadena codificada Base64 de caracteres directamente en el código. Una de las ventajas de las URL de datos es que la imagen resultante está disponible de inmediato, sin necesidad de ir y volver al servidor. (Otra ventaja es que es posible encapsular en un único archivo todos los CSS, Javascript, HTML, e imágenes, por lo que resulta más fácil moverla a otras ubicaciones. ) Algunas de las desventajas de este método es que la imagen no se almacena en caché y para imágenes más grandes la URL codificada puede llegar a ser muy larga:

var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';

drawImage

Una vez que tengamos una referencia a nuestro objeto de imagen de origen, podemos utilizar el método drawImage para representarla en el lienzo. Como veremos más tarde, el método drawImage está sobrecargado y tiene tres variantes diferentes. En su forma más básica tiene este aspecto.

drawImage(image, x, y)

Donde image es una referencia a nuestra imagen u objeto canvas. x e y forman las coordenadas en el lienzo de destino donde se colocará nuestra imagen.

Ejemplo 1 de drawImage

En el siguiente ejemplo voy a utilizar una imagen externa como fondo de un pequeño gráfico de líneas. El uso de fondo puede hacer que tu script sea considerablemente menor porque no tenemos que dibujar un fondo con demasiados detalles. Como sólo estoy usando una imagen aquí, utilizo el controlador de evento onload del objeto de imagen para ejecutar las instrucciones de dibujo. El método drawImage coloca el fondo en la coordenada (0,0), que es la esquina superior izquierda del lienzo.

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.src = 'backdrop.png';
    img.onload = function(){
      ctx.drawImage(img, 0, 0);
      ctx.beginPath();
      ctx.moveTo(30, 96);
      ctx.lineTo(70, 66);
      ctx.lineTo(103, 76);
      ctx.lineTo(170, 15);
      ctx.stroke();
    }
  }

Para ver el siguiente ejemplo funcionando, se puede acceder al siguiente link:
Ver ejemplo

Escala

La segunda variante del método drawImage añade dos nuevos parámetros y nos permite colocar imágenes a escala en el lienzo.

drawImage(image, x, y, width, height)

Donde width y height (ancho y alto, respectivamente) es el tamaño de la imagen en el lienzo de destino.

Ejemplo 2 de drawImage

En este ejemplo voy a utilizar una imagen como fondo de pantalla y repetirla varias veces en el lienzo. Esto se hace simplemente por medio de bucles y de la colocación de las imágenes a escala en diferentes posiciones. En el código inferior el primer for recorre las filas y el segundo for recorre las columnas. La imagen se escala a un tercio de su tamaño original, que es 50x38 píxeles. Más adelante en este tutorial, vamos a ver cómo se podría también haber logrado esto mediante la creación de un modelo personalizado.

Nota: Las imágenes pueden resultar borrosas cuando se aumenta la escala o granuladas si se han reducido demasiado. Probablemente lo mejor es que no apliques la escalasi tienes texto que debe permanecer legible.

<html>
  <head>
    <title>Canvas drawImage example 2</title>
    <script type="application/x-javascript">
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      var img = new Image();
      img.src = 'images/rhino.jpg';
      img.onload = function(){
        for (i=0;i<4;i++){
          for (j=0;j<3;j++){
            ctx.drawImage(img,j*50,i*38,50,38);
          }
        }
      }
    }
    </script>
  </head>
  <body onload="draw();">
    <h1>Canvas drawImage example 2</h1>
    <div>
      <canvas id="canvas" width="150" height="150"></canvas>
    </div>
  </body>
</html>

Segmentar

La tercera y última variante del método drawImage cuenta con ocho nuevos parámetros. Podemos utilizar este método para segmentar partes de una imagen de origen y dibujarlas en el lienzo.

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

El primer parámetro image, al igual que las otras variantes, es o bien una referencia a un objeto de imagen o una referencia a un elemento canvas diferente. Para los otros ocho parámetros, lo mejor es mirar la imagen de la derecha. Los primeros cuatro parámetros definen la ubicación y el tamaño del segmento de la imagen de origen. Los últimos cuatro parámetros definen la posición y tamaño en el lienzo de destino.

La segmentación puede ser una herramienta útil cuando se desea hacer composiciones. Puedes tener todos los elementos en un solo archivo de imagen y utilizar este método para componer un dibujo completo. Por ejemplo, si quieres hacer un gráfico, puedes tener una imagen PNG que contenga todo el texto necesario en un solo archivo y, en función de los datos, puedes cambiar la escala del gráfico sin mucha dificultad. Otra ventaja es que no es necesario cargar cada imagen por separado.

Ejemplo 3 de drawImage

En este ejemplo voy a utilizar el mismo rinoceronte que hemos visto anteriormente, pero ahora voy a segmentar su cabeza y componer un marco de imagen. La imagen del marco de imagen incluye una sombra que se ha guardado como una imagen PNG de 24 bits. Como las imágenes PNG de 24 bits incluyen un completo canal alfa de 8 bits, a diferencia de las imágenes GIF y PNG de 8 bits, puedo colocarla sobre cualquier fondo sin tener que preocuparme por un color mate.

He adoptado un enfoque diferente acerca de la carga de las imágenes respecto al ejemplo anterior. Simplemente coloqué las imágenes directamente en mi documento HTML y usé una regla CSS para

ocultarlos de la vista (display:none). He asignado a las dos imágenes un atributo id para que sean más fáciles de seleccionar. El propio script es muy simple. En primer lugar, dibujo la imagen segmentada y a escala en el lienzo (primera instrucción drawImage) y luego coloco el marco en la parte superior (segunda instrucción drawImage).

<html>
  <head>
    <title>Canvas drawImage example 3</title>
    <script type="application/x-javascript">
    function draw() {
      var ctx = document.getElementById('canvas').getContext('2d');
      ctx.drawImage(document.getElementById('source'),33,71,104,124,21,20,87,104);
      ctx.drawImage(document.getElementById('frame'),0,0);
    }
    </script>
  </head>
  <body onload="draw();">
    <div>
      <h1>Canvas <code>drawImage</code> example 3</h1>
      <canvas id="canvas" width="150" height="150"></canvas>
    </div>
  </body>
</html>

Donde el id source es la imagen del rinoceronte y el id frame es el id de la imagen del marco.

Ejemplo de la galería de arte

En el último ejemplo de este capítulo he hecho una pequeña galería de arte. La galería consta de una

tabla que contiene varias imágenes. Cuando se carga la página, para cada imagen de la página se inserta un elemento canvas y se dibuja un marco alrededor.

En mi caso, todas las imágenes tienen una anchura y altura fijas y lo mismo ocurre con el marco que he dibujado a su alrededor. Podrías mejorar el script de forma que use el ancho y el alto de la imagen para hacer que el marco se ajuste perfectamente.

No hace falta explicar el código de abajo. Recorremos la matriz de las imágenes y añadimos nuevos elementos canvas según corresponda. Probablemente lo único que debamos subrayar, para aquellos que no estén tan familiarizados con el DOM, es el uso del método insertBefore. insertBefore es un método del nodo principal (una celda de tabla) del elemento (la imagen) delante de la cual queremos insertar nuestro nuevo nodo (el elemento canvas).

<html>
  <head>
    <title>Canvas Art gallery</title>
    <script type="application/x-javascript">
      function draw() {
      
        // Loop through all images
        for (i=0;i<document.images.length;i++){
      
          // Don't add a canvas for the frame image
          if (document.images[i].getAttribute('id')!='frame'){
      
            // Create canvas element
            canvas = document.createElement('CANVAS');
            canvas.setAttribute('width',132);
            canvas.setAttribute('height',150);
      
            // Insert before the image
            document.images[i].parentNode.insertBefore(canvas,document.images[i]);
      
            ctx = canvas.getContext('2d');
      
            // Draw image to canvas
            ctx.drawImage(document.images[i],15,20);
      
            // Add frame
            ctx.drawImage(document.getElementById('frame'),0,0);
          }
        }
      }
    </script>
  </head>
  <body onload="draw();">
    <table>
      <tr>
        <td><img src="images/gallery_1.jpg"></td>
        <td><img src="images/gallery_2.jpg"></td>
        <td><img src="images/gallery_3.jpg"></td>
        <td><img src="images/gallery_4.jpg"></td>
      </tr>
      <tr>
        <td><img src="images/gallery_5.jpg"></td>
        <td><img src="images/gallery_6.jpg"></td>
        <td><img src="images/gallery_7.jpg"></td>
        <td><img src="images/gallery_8.jpg"></td>
      </tr>
    </table>
    <img src="images/picture_frame.png" width="132" height="150" id="frame">
  </body>
</html>

Controlar la conducta de escala de imagen

Gecko 1.9.2 introdujo la propiedad mozImageSmoothingEnabled en el elemento canvas, si este valor booleano es false, las imágenes no se suavizan cuando se escala. Esta propiedad es true de manera predeterminada.

cx.mozImageSmoothingEnabled = false;

HTML5 - Dibujando Formas con canvas II

No hay comentarios : Posted by daycry at 13:43 Labels: HTML , HTML5

Lineas

Para dibujar líneas rectas, utilice el método lineTo().

lineTo (x, y)

Dibuja una línea desde la posición de dibujo actual hasta la posición especificada por x e y.

Este método toma dos argumentos, x e y, que son las coordenadas del punto final de la línea. El punto de partida depende de caminos previamente dibujadas, donde el punto final de la trayectoria anterior es el punto de partida para la siguiente, etc El punto de partida también se pueden cambiar usando el método moveTo().

El siguiente ejemplo dibuja dos triángulos, uno lleno y otro esbozado.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    // Filled triangle
    ctx.beginPath();
    ctx.moveTo(25,25);
    ctx.lineTo(105,25);
    ctx.lineTo(25,105);
    ctx.fill();

    // Stroked triangle
    ctx.beginPath();
    ctx.moveTo(125,125);
    ctx.lineTo(125,45);
    ctx.lineTo(45,125);
    ctx.closePath();
    ctx.stroke();
  }
}

Así se inicia llamando beginPath() para iniciar un nuevo trazado de forma. A continuación, utilizamos el método moveTo() para mover el punto de partida hasta la posición deseada. Por debajo de este, se trazarán dos líneas que forman dos lados del triángulo.

Se dará cuenta de la diferencia entre el triángulo relleno y bordeado. Esto es, como se mencionó anteriormente, debido a que formas se cierran automáticamente cuando se llena un camino, pero no cuando están contorneados. Si no usamos la función closePath() para el triángulo con trazo, sólo dos líneas se han dibujado, y no cerrará para dibujar el triángulo completo.

Arcs

Para dibujar arcos o círculos, se utiliza el método de arc(). También puede utilizar arcTo(), pero sus implementaciones son algo menos fiable, por lo que no entraremos en ese tema.

arc(x, y, radius, startAngle, endAngle, anticlockwise)

Dibuja un arco.

Este método toma cinco parámetros: x e y son las coordenadas del centro del círculo en que deberían proceder del arco. radio es autoexplicativo. Los parámetros startAngle y endAngle definen los puntos inicial y final del arco en radianes, a lo largo de la curva del círculo. Estos se miden desde el eje x. El parámetro hacia la izquierda es un valor booleano que, cuando es verdadero, dibuja el arco hacia la izquierda; de lo contrario, el arco se dibuja en sentido horario.

Nota: Los ángulos de la función arc() se miden en radianes, no en grados. Para convertir grados a radianes puede utilizar la siguiente expresión de JavaScript: radianes = (Math.PI / 180) * grados.

El siguiente ejemplo es un poco más complejo que los que hemos visto anteriormente. Dibuja 12 arcos diferentes, todos con diferentes ángulos y rellenos.

Los dos bucles for son para recorrer a través de las filas y columnas de los arcos. Para cada arco, empezamos un nuevo camino llamando beginPath(). En el código, cada uno de los parámetros para el arco está en una variable para mayor claridad, pero no sería necesariamente hacer eso en la vida real.

Las coordenadas X e Y deben ser lo suficientemente claro. radio y startAngle son fijos. El endAngle comienza en 180 grados (medio círculo) de la primera columna y se incrementa en pasos de 90 grados, que culminó en un círculo completo en la última columna.

La declaración de los resultados de los parámetros hacia la derecha en la primera y tercera fila se dibuja como arcos hacia la derecha y la segunda y la cuarta fila como arcos en sentido anti horario. Por último, la sentencia if hace que la mitad superior se acarició arcos y los arcos de medio fondo llenas.

Nota: En este ejemplo se requiere un lienzo ligeramente más grande que los otros en esta página: 150 x 200 píxeles.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    for(var i=0;i<4;i++){
      for(var j=0;j<3;j++){
        ctx.beginPath();
        var x              = 25+j*50;               // x coordinate
        var y              = 25+i*50;               // y coordinate
        var radius         = 20;                    // Arc radius
        var startAngle     = 0;                     // Starting point on circle
        var endAngle       = Math.PI+(Math.PI*j)/2; // End point on circle
        var anticlockwise  = i%2==0 ? false : true; // clockwise or anticlockwise

        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

        if (i>1){
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}

Bezier y curvas cuadráticas

El siguiente tipo de rutas disponibles son las curvas de Bézier, disponibles en ambas variedades cúbicas y cuadráticas. Estos se utilizan generalmente para dibujar formas orgánicas complejas.

quadraticCurveTo (cp1x, cp1y, x, y)

Dibuja una curva Bézier cuadrática de la posición actual de la pluma hasta el punto final especificado por x e y, utilizando el punto de control especificado por cp1x y cp1y.

bezierCurveTo (cp1x, cp1y, cp2x, cp2y, x, y)

Dibuja una curva Bézier cúbica desde la posición actual del lápiz hasta el punto final especificado por x e y, utilizando los puntos de control especificados por (cp1x, cp1y) y (cp2x, cp2y).

La diferencia entre éstos se puede describir utilizando la imagen de la derecha. Una curva Bézier cuadrática tiene un inicio y un punto final (puntos azules) y un solo punto de control (indicado por el punto rojo), mientras que una curva cúbica de Bézier usa dos puntos de control.

Los parámetros X e Y en ambos de estos métodos son las coordenadas del punto final. cp1x cp1y y son las coordenadas del primer punto de control, y cp2x cp2y y son las coordenadas del segundo punto de control.

Utilizando las curvas de Bézier cuadráticas y cúbicas puede ser bastante difícil, porque a diferencia del software de dibujo vectorial como Adobe Illustrator, no tenemos información visual directa en cuanto a lo que estamos haciendo. Esto hace que sea muy difícil de dibujar formas complejas. En el siguiente ejemplo, vamos a dibujar algunas formas orgánicas simples, pero si usted tiene el tiempo y, sobre todo, la paciencia, mucho más complejas formas se pueden crear.

No hay nada muy difícil en estos ejemplos. En ambos casos vemos una sucesión de curvas está elaborando lo que finalmente resulta en una forma completa.

Curvas cuadráticas de Bézier

Este ejemplo utiliza varias curvas cuadrática de Bézier para hacer un globo de diálogo.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    // Quadratric curves example
    ctx.beginPath();
    ctx.moveTo(75,25);
    ctx.quadraticCurveTo(25,25,25,62.5);
    ctx.quadraticCurveTo(25,100,50,100);
    ctx.quadraticCurveTo(50,120,30,125);
    ctx.quadraticCurveTo(60,120,65,100);
    ctx.quadraticCurveTo(125,100,125,62.5);
    ctx.quadraticCurveTo(125,25,75,25);
    ctx.stroke();
  }
}

Curvas Bézier cúbicas

En este ejemplo se dibuja un corazón utilizando curvas cúbicas de Bézier.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    // Quadratric curves example
    ctx.beginPath();
    ctx.moveTo(75,40);
    ctx.bezierCurveTo(75,37,70,25,50,25);
    ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
    ctx.bezierCurveTo(20,80,40,102,75,120);
    ctx.bezierCurveTo(110,102,130,80,130,62.5);
    ctx.bezierCurveTo(130,62.5,130,25,100,25);
    ctx.bezierCurveTo(85,25,75,37,75,40);
    ctx.fill();
  }
}

Los rectángulos

Además de los tres métodos que vimos en rectángulos de dibujo, que dibujan formas rectangulares directamente a la lona, hay también el método rect (), que añade una trayectoria rectangular a un camino abierto.

rect(x, y, width, height)
Dibuja un rectángulo cuya esquina superior izquierda está especificado por (x, y) con el width y height especificados.

Cuando se ejecuta este método, el método moveTo() se llama de forma automática con los parámetros (0,0). En otras palabras, la posición actual de la pluma se restablece automáticamente a las coordenadas por defecto.

Hacer combinaciones

Hasta ahora, cada ejemplo en esta página ha utilizado un solo tipo de función de trayectoria por la forma. Sin embargo, no hay ninguna limitación en el número o el tipo de caminos que puede utilizar para crear una figura. Así que en este último ejemplo, vamos a combinar todas las funciones de trayectoria para hacer un conjunto de personajes de juegos muy famosos.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    roundedRect(ctx,12,12,150,150,15);
    roundedRect(ctx,19,19,150,150,9);
    roundedRect(ctx,53,53,49,33,10);
    roundedRect(ctx,53,119,49,16,6);
    roundedRect(ctx,135,53,49,33,10);
    roundedRect(ctx,135,119,25,49,10);

    ctx.beginPath();
    ctx.arc(37,37,13,Math.PI/7,-Math.PI/7,false);
    ctx.lineTo(31,37);
    ctx.fill();

    for(var i=0;i<8;i++){
      ctx.fillRect(51+i*16,35,4,4);
    }

    for(i=0;i<6;i++){
      ctx.fillRect(115,51+i*16,4,4);
    }

    for(i=0;i<8;i++){
      ctx.fillRect(51+i*16,99,4,4);
    }

    ctx.beginPath();
    ctx.moveTo(83,116);
    ctx.lineTo(83,102);
    ctx.bezierCurveTo(83,94,89,88,97,88);
    ctx.bezierCurveTo(105,88,111,94,111,102);
    ctx.lineTo(111,116);
    ctx.lineTo(106.333,111.333);
    ctx.lineTo(101.666,116);
    ctx.lineTo(97,111.333);
    ctx.lineTo(92.333,116);
    ctx.lineTo(87.666,111.333);
    ctx.lineTo(83,116);
    ctx.fill();

    ctx.fillStyle = "white";
    ctx.beginPath();
    ctx.moveTo(91,96);
    ctx.bezierCurveTo(88,96,87,99,87,101);
    ctx.bezierCurveTo(87,103,88,106,91,106);
    ctx.bezierCurveTo(94,106,95,103,95,101);
    ctx.bezierCurveTo(95,99,94,96,91,96);
    ctx.moveTo(103,96);
    ctx.bezierCurveTo(100,96,99,99,99,101);
    ctx.bezierCurveTo(99,103,100,106,103,106);
    ctx.bezierCurveTo(106,106,107,103,107,101);
    ctx.bezierCurveTo(107,99,106,96,103,96);
    ctx.fill();

    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.arc(101,102,2,0,Math.PI*2,true);
    ctx.fill();

    ctx.beginPath();
    ctx.arc(89,102,2,0,Math.PI*2,true);
    ctx.fill();
  }
}

// A utility function to draw a rectangle with rounded corners.

function roundedRect(ctx,x,y,width,height,radius){
  ctx.beginPath();
  ctx.moveTo(x,y+radius);
  ctx.lineTo(x,y+height-radius);
  ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
  ctx.lineTo(x+width-radius,y+height);
  ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
  ctx.lineTo(x+width,y+radius);
  ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
  ctx.lineTo(x+radius,y);
  ctx.quadraticCurveTo(x,y,x,y+radius);
  ctx.stroke();
}

HTML5 - Dibujando formas con canvas

No hay comentarios : Posted by daycry at 12:08 Labels: HTML , HTML5

La red

Antes de que podamos empezar a dibujar, necesitamos hablar sobre la red de canvas o espacio de coordinación. La plantilla de la página anterior tenía un elemento canvas con un height y un width de 150 pixeles. A la derecha, puedes ver este canvas con la red normal overlayed. Normalmente una unidad en la red corresponde a un pixel en el elemento canvas. El origen de esta red esta posicionado en la esquina superior derecha (coordenada (0,0)). Todos los elementos estan posicionados de manera relativa a este punto, así que la posición de la esquina superior derecha del cuadrado azul es de x pixeles desde la izquierda y y pixeles desde arriba (coordenada (x,y)). Mas tarde en este tutorial veremos como trasladar el punto de origen a una posición diferente, girar la red e incluso darle una escala diferente. Por ahora nos dedicaremos a lo mas común.

Dibujando rectángulos

A diferencia de SVG, <canvas> sólo es compatible con una forma primitiva: rectángulos. Todas las demás formas se deben crear mediante la combinación de una o más rutas. Por suerte, contamos con una variedad de funciones de trayectoria dibujo que permiten componer formas muy complejas.

En primer lugar vamos a ver el rectángulo. Hay tres funciones que dibujan rectángulos en el canvas:

fillRect(x, y, width, height)
Dibuja un rectángulo relleno. 

strokeRect(x, y, width, height)
Dibuja un contorno rectangular. 

clearRect(x, y, width, height)
Borra el área rectangular especificada, por lo que es totalmente transparente.

Cada una de estas tres funciones toma los mismos parámetros. x e y especifican la posición en el canvas (en relación con el origen) de la esquina superior izquierda del rectángulo. anchura y altura proporcionan el tamaño del rectángulo.

A continuación se muestra la función draw() de la página anterior, pero ahora haciendo uso de estas tres funciones.

Ejemplo Forma Rectangular

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25,25,100,100);
    ctx.clearRect(45,45,60,60);
    ctx.strokeRect(50,50,50,50);
  }
}

El resultado de este ejemplo se muestra a continuación.

La función fillRect() dibuja un cuadrado grande negro 100 píxeles en cada lado. La función clearRect() y luego borra un cuadrado de 60x60 pixel del centro, y luego strokeRect() es llamado para crear un contorno rectangular de 50x50 píxeles dentro de la plaza despejado.

En las próximas páginas veremos dos métodos alternativos para clearRect(), y también veremos cómo cambiar el color y el trazo estilo de las formas prestados.

A diferencia de las funciones de trayectoria que veremos en la siguiente sección, las tres funciones rectángulo dibujan inmediatamente al canvas.

Dibujando trazados

Para hacer formas con trazados toma algunas medidas adicionales. En primer lugar, se crea el camino. Luego utiliza comandos de dibujo para dibujar en el camino. Luego cierra el camino. Una vez que el camino ha sido creado, puedes modificar o llenar el camino para hacerlo. Estas son las funciones que se usan para hacer esto:

beginPath()
Crea un nuevo camino. Una vez creado, comandos de dibujo futuras se dirigen a la ruta de acceso y usados para construir el camino hacia arriba. 

closePath()
Cierra la ruta para que los comandos de dibujo futuras se dirigen de nuevo al contexto. 

stroke()
Dibuja la forma por retocar su contorno.

fill()
Dibuja una forma sólida llenando área de contenido de la ruta.

El primer paso para crear un camino es llamar a la beginPath(). Internamente, las rutas se almacenan como una lista de sub-rutas (líneas, arcos, etc) que en conjunto forman una figura. Cada vez que este método se llama, la lista se pone a cero y podemos empezar a dibujar nuevas formas.

Nota: Si la trayectoria actual está vacía, por ejemplo, inmediatamente después de llamar beginPath (), o en un lienzo de nueva creación, el primer comando de construcción de pistas siempre es tratado como un moveTo (), independientemente de lo que realmente es. Por esa razón, casi siempre tendrá que ajustar específicamente a su posición inicial después de reiniciar un camino.

El segundo paso es llamar a los métodos que realmente especifican los caminos para ser dibujado.

La tercero, es un paso opcional, es llamar closePath(). Este método intenta cerrar la forma dibujando una línea recta desde el punto actual al inicio. Si la forma ya se ha cerrado o no hay un solo punto en la lista, esta función no hace nada.

Nota: Cuando se llama a fill(), las formas abiertas se cierran automáticamente, asíque no tienes que llamar closePath (). Este no es el caso cuando se llama stroke().

Dibujando un triangulo

Para dibujar un triangulo podemos ver el siguiente ejemplo:

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
  }
}

El resultado es el siguiente:

Moviendo el lápiz

Una función muy útil, que en realidad no dibuja nada, pero se convierte en parte de la lista de rutas se ha descrito anteriormente, es la función moveTo (). Probablemente mejor que se puede pensar en esto como levantar una pluma o un lápiz de un punto en una hoja de papel y colocarlo en la siguiente.

moveTo (x, y)

Mueve la pluma a las coordenadas especificadas por xe y.

Cuando el canvas se inicializa o beginPath() se llama, normalmente tendrá que usar la función moveTo() para colocar el punto de partida en otro lugar. También podríamos utilizar moveTo() para dibujar caminos inconexos. Echa un vistazo a la cara sonriente a continuación. He marcado los lugares donde acostumbraba el método moveTo() (las líneas rojas).

Para probar esto por ti mismo, puede utilizar el siguiente fragmento de código. Sólo tienes que pegar en la función draw () que vimos anteriormente.

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle
    ctx.moveTo(110,75);
    ctx.arc(75,75,35,0,Math.PI,false);   // Mouth (clockwise)
    ctx.moveTo(65,65);
    ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
    ctx.moveTo(95,65);
    ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
    ctx.stroke();
  }
}

Teniendo como resultado:

Nota: Para obtener más información sobre la función de arc(), consulte los Arc.

Puedes acceder a la segunda parte de este post a través del siguiente link: canvas II

HTML5 - Canvas Usos Básicos

No hay comentarios : Posted by daycry at 11:34 Labels: HTML , HTML5

Comenzamos este tutorial observando al elemento <canvas> en si mismo.

<canvas id="tutorial" width="150" height="150"></canvas>

Observamos un gran parecido al elemento <img>, con la sola diferencia que este no tiene los atributos src y alt. El elemento <canvas> tiene solo dos atributos - width y height. Estos son ambos opcionales y pueden tambien ser puestos usando propiedades DOM. Cuando los atributos ancho y alto no estan especificados, el lienzo se inicializara por 300 pixels ancho y 150 pixels de alto. El elemento puede ser arbitrariamente redimensionado por CSS, pero durante el renderizado la imagen es escalada para ajustarse a el tamaño de su layout.

Nota: Si su renderizado se ve distorcionado, prueba especificar los atributos width y height explicitamente como <canvas> atributos, y no usando CSS.

El atributo id no esta especificado para el elemento <canvas> pero es una de los atributos por defecto en HTML el cual puede ser aplicado a (almost) cada elemento HTML (parecido a class para instancias). Es siempre una buena idea suministrar un id porque esto hace mucho mas facil identificarlo en nuestro script.

El elemento <canvas> puede ser puesto un estilo como a cualquier imagen normal (margin, border, background, etc). Estas reglas, sin embargo, no afectan a lo dibujado sobre el lienzo (canvas). Nosotros veremos como se hace esto luego en este tutorial. Cuando no tenemos aplicadas reglas de estilo a el lienzo (canvas) este inicialmente sera completamente transparente.

Contenido de reserva

Desde algunos navegadores viejos (en particular, las versiones anteriores a la version 9 de Internet Explorer) no soportan el elemento <canvas>, y deberás proveer contenido de reserva para ser mostrado por esos navegadores.

Este es muy explicito: Nosotros debemos proveer contenido alternativo al que tiene el elemento <canvas> dentro. Navegadores que no soportan <canvas> ignoraran el contenedor y regresara el contenido indicado dentro de este. Navegadores que soporten <canvas> ignoraran el contenido en su interior (de las etiquetas), y solo renderizaran el canvas normalmente.

Por ejemplo, Nosotros podremos proveer un texto descriptivo del contenido del canvas o proveer una imagen estatica del contenido rederizado. Este puede verse algo como esto:

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 +0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>

El contexto de renderizacion

<canvas> crea un lienzo de dibujo fijado que expone uno o mas contextos renderizados, los cuales son usados para crear y manipular el contenido mostrado. Nos enfocaremos en renderizacion de contextos 2D. Otros contextos deberan proveer diferentes tipos de renderizaciones; por ejemplo, WebGL usa un 3D contexto ("experimental-webgl") basado sobre OpenGL ES.

El canvas esta inicialmente en blanco. Para mostrar alguna cosa, un script primero necesita acceder al contexto a renderizar y dibujar sobre este. El elemento <canvas> tiene un method llamado getContext(), usado para obtener el contexto a renderizar y sus funciones de dibujo. getContext() toma un parametro, el tipo de contexto. Para graficos 2D, como los que cubre este tutorial, su especificacion es "2d".

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

La primera linea regresa el nodo DOM para el elemento <canvas> llamando al metodo document.getElementById(). Una vez tu tienes el elemento nodo, tu puedes acceder al contexto de dibujo usando su metodo getContext().

Comprobando soporte

El contenido de regreso que es mostrado en navegadores los cuales no soportan <canvas>. Para los Scripts puede tambien comprobarse su soporte desde la programacion por un simple test para la presencia del metodo getContext(). Con un trozo de codigo parecido al que viene debajo:

var canvas = document.getElementById('tutorial');

if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

Esqueleto de plantilla

Ejemplo de una plantilla mínima, la cual usaremos como punto de partida para posteriores ejemplos.

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

El script incluye una funcion llamada draw(), la cual es ejecutada una vez finalizada la carga de la pagina; este esta hecho usando el evento load del documento. Esta funcion, o una parecida, podría también ser llamada usando window.setTimeout(), window.setInterval(), o cualquier otro controlador de evento, a lo largo de que la pagina esta siendo cargada la primera vez.

Aquí esta como la plantilla se ve in acción:

Un simple ejemplo

Para comenzar, daremos un vistazo a un simple ejemplo que dibuja dos rectángulos que tiene una intersección, uno de los cuales tiene alpha transparencia. Exploraremos como esto trabaja en mas detalle en posteriores ejemplos.

<html>
 <head>
  <script type="application/javascript">
    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");

        ctx.fillStyle = "rgb(200,0,0)";
        ctx.fillRect (10, 10, 55, 50);

        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
        ctx.fillRect (30, 30, 55, 50);
      }
    }
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="150" height="150"></canvas>
 </body>
</html>

Este ejemplo se parece a esto:

Suscribirse a: Entradas ( Atom )