ingenieradesistemas
499751083497328
Cargando...

Contenedor y JavaScript asociado



Es momento de utilizar la etiqueta Canvas que nos permite dibujar usando operaciones con JavaScript en un área rectangular interactuando con HTML. Es decir que dentro de nuestro código podemos usar tanto HTML5 como JavaScript de tal forma el resultado sea una muestra en pantalla como consecuencia del uso de HTML y JavaScript.

Contenedor y JavaScript asociado

En nuestro ejemplo vamos a dibujar en el navegador un marco rectangular y dentro de ese marco un rectángulo con relleno de color azul.

El código es así:

<!DOCTYPE html>
<html>
<head>
 <title>Mi primer canvas</title>
</head>
<body>
<canvas id="miCanvas" width="400px" height="400px" style="border:2px solid #FF0000">
Tu navegador aun no soporta Canvas 
</canvas>
<script type="text/javascript">
 var c=document.getElementById('miCanvas');
 var cxt=c.getContext('2d');
 cxt.fillStyle="Blue";
 cxt.fillRect(10,10,200,300);
</script>
</body>
</html>

Y el resultado en pantalla es:

Y si hacen click derecho observarán que podrán guardar la imagen para lo cual pueden darle el formato que corresponde: .jpg, .png.


HTML5 y CSS3 3176220076449087841

Publicar un comentario Default Comments

emo-but-icon

Página principal item

Los apuntes en tu correo

Síguenos en Facebook

Apuntes aleatorios