miércoles, 14 de noviembre de 2012

Trabajar con canvas en HTML5





Canvas en html 5 en la oportunidad de crear imágenes dinámicas



 canvas .


<html>
<body>
<canvas id="canvas" width="400px" height="400px" style="border:1px solid #990000">
Tu navegador no soporta  Canvas
</canvas>
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
cxt.fillStyle="Red";
cxt.fillRect(10,10,100,50);
</script>
</body>

</html>


La primera parte es solo un recuadro


donde se  asigno  un id de canvas 


<canvas id="canvas"



que sera llamado en el

 <script type="text/javascript">
var c=document.getElementById("canvas");



con su medida, borde y color 

width="400px" height="400px" style="border:1px solid #990000">

Donde 

cxt.fillRect(10,10,100,50);

representan los parámetros del rectángulo .
10 su punto de inserción partiendo de la izquierda
10 punto de inserción partiendo desde  arriba
100 la anchura
50 la altura 


y el color 

cxt.fillStyle="Red";
que puede ser cambiado a cualquier otro .

quedando una imagen en mapa bits 





Tu navegador no soporta Canvas





También  !


Microdatos .
Manifiesto

Canvas.
Nota adhesiva ,audio vídeo.