Contenedor y JavaScript asociado
https://engineerdesistemas.blogspot.com/2016/12/contenedor-y-javascript-asociado.html
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.
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í:
Y el resultado en pantalla es:
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.
