"
Team:Sevilla/test3
From 2011.igem.org
(Difference between revisions)
| Line 180: | Line 180: | ||
<div id="videoDiv">Loading...pulsa F5</div> | <div id="videoDiv">Loading...pulsa F5</div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <script> | ||
| + | window.onload = function(){ | ||
| + | //Recibimos el elemento canvas | ||
| + | var elemento = document.getElementById('micanvas'); | ||
| + | //Comprobación sobre si encontramos un elemento | ||
| + | //y podemos extraer su contexto con getContext(), que indica compatibilidad con canvas | ||
| + | if (elemento && elemento.getContext) { | ||
| + | //Accedo al contexto de '2d' de este canvas, necesario para dibujar | ||
| + | var contexto = elemento.getContext('2d'); | ||
| + | if (contexto) { | ||
| + | //Si tengo el contexto 2d es que todo ha ido bien y puedo empezar a dibujar en el canvas | ||
| + | //Comienzo dibujando un rectángulo. //Los dos últimos parámetros son los valores de anchura y altura | ||
| + | contexto.fillRect(0, 0, 150, 100); | ||
| + | //cambio el color de estilo de dibujo a rojo | ||
| + | contexto.fillStyle = '#cc0000'; | ||
| + | //dibujo otro rectángulo. | ||
| + | contexto.fillRect(10, 10, 100, 70); | ||
| + | //cambio el color de dibujo a azul | ||
| + | contexto.fillStyle = '#6666ff'; | ||
| + | //dibujo un rectángulo azul | ||
| + | contexto.fillRect(110,110,50,50); | ||
| + | //cambio el color a amarillo con un poco de transparencia | ||
| + | contexto.fillStyle = 'rgba(255,255,0,0.4)'; //cuanto mas bajo sea el ultimo parametro (0-1) mas transparente | ||
| + | //pinto un rectángulo amarillo semitransparente | ||
| + | contexto.fillRect(135,135,50,50); | ||
| + | //dibujar rectangulos vacios: | ||
| + | contexto.strokeRect(35,135,50,50); | ||
| + | //Borrar areas rectangulares: clearRect(x,y,anchura,altura) | ||
| + | |||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | </script> | ||
| + | |||
| + | |||
| + | <canvas id="micanvas" width="500" height="500"> | ||
| + | Este texto se muestra para los navegadores no compatibles con canvas. | ||
| + | <br> | ||
| + | Por favor, utiliza Firefox, Chrome, Safari u Opera. | ||
| + | </canvas> | ||
| + | |||
| + | |||
| + | |||
Revision as of 10:19, 17 April 2011
Loading...pulsa F5
