10. Curso HTML5. Novedades. Tags: Canvas(2)
- Vamos a continuar con nuestro curso de html . Después de ver en la entrada anterior las etiquetas video y canvas. En este capítulo profundizaremos en el uso de la etiqueta canvas.
- Como ya avanzamos en la entrada anterior la etiqueta canvas consiste en una región definida en el código HTML con atributos de altura y ancho. Utilizando JavaScript se puede acceder a la zona a través de un conjunto completo de funciones, permitiendo así que los gráficos sean generados dinámicamente.
- Canvas se apoya en las versiones actuales de Mozilla Firefox, Google Chrome, Internet Explorer, Safari y Opera. Las versiones anteriores de Internet Explorer, como la versión 8 y anteriores no son compatibles.
- Aquí os dejo un vídeo con ejemplos de uso de estos controles:
- Os dejo también el código html visto en el vídeo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Pruebas</title>
<link href="StyleSheet1.css" rel="stylesheet" />
<script type="text/javascript">
function dibuja() {
var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
/*cxt.fillStyle = "#FF0000";
cxt.beginPath();
cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
cxt.moveTo(10, 10);
cxt.lineTo(150, 150);
cxt.lineTo(10, 50);
cxt.stroke();*/
var grd = cxt.createLinearGradient(0, 0, 175, 50);
grd.addColorStop(0,'#FF0000');
grd.addColorStop(1,'#00FF00');
cxt.fillStyle = grd;
cxt.fillRect(0,0,175,50);
}
</script>
</head>
<body>
<form >
<article>
<header>
<h1>Mi primera página html</h1>
</header>
</article>
<nav>
<ul>
<li><a href="#">Uno</a></li>
<li><a href="#">Dos</a></li>
<li><a href="#">Tres</a></li>
<li><a href="#">Cuatro</a></li>
</ul>
</nav>
<article class="pagina">
<section class="contenedor">
<br />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIIrOH9SJeXDSEeOFtMxez5Zfnozh9J3l27GClLeYM0LZSaUFN1zCiN3AG604Yxm03evhidS9gxy9bkM9TtOrgoBP1yPbk6CFIb6v8oiqpxWOMVcbEc-h66TLgHrRYXSZ0ZxPhSdtb0A/s640/Basedatosnba.png" />
<figcaption><mark> diseño de BBDD para web Scrapping</mark></figcaption>
</section>
<aside>
<input type="search" placeholder="Busqueda" />
<input type="email" placeholder="email" />
<input type="url" placeholder="url" />
<input type="tel" placeholder="telefono" /><br />
<input type="number" placeholder="numero" min="0" max="10" />
<input type="range" name="nunmero" id="numero" min="0" max="100" step="25" /> <br />
<input type="date" name="fecha" id="fecha" />
<input type="week" name="semana" id="semana" />
<input type="month" name="mes" id="mes" /> <br /><br />
<input type="time" name="hora" id="hora" checked />
<input type="datetime" name="fechahora" id="fechahora" />
<input type="color" name="micolor" id="micolor" /><br /><br />
<progress value="20" max="100" >60%</progress>
<meter min="0" max="100" value="75" ></meter>
<audio controls="controls" class="audio">
<source src="Rock_Intro_4.mp3" type="audiompeg" />
</audio><br /><br />
<video controls="controls" height="300" width="300" muted>
<source src="Suscribete.mp4" type="video/mp4" />
</video><br />
<canvas id="myCanvas" >
</canvas>
<input type="submit" value="Enviar" onclick="dibuja();" />
</aside>
</article>
<article class="pagina">
<section class="contenedor">
<br />
<mark>ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ</mark> <br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ<br />
</section>
<aside>
<p>YYYYYYYYYYYYYYYy</p>
</aside>
</article>
<article>
<footer>
<ul>
<li><a href="#">Derechos de uso</a></li>
<li><a href="#">Copyright</a></li>
</ul>
</footer>
</article>
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario