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