1.- La visualización de videos
2.- El uso de un elemento denominado canvas (similar al canvas de AppInventor)
Desde el punto de vista técnico otra gran diferencia es que una WEB HTML5 no tiene 2 partes, sino 5 que son:
Una página diseñada en HTML 5 es similar a la de HTML4 pero incorporando los elementos propios de esta versión. A nivel de gráficos y videojuegos tiene muchas aplicaciones. Os dejo un ejemplo que permite dibujar con el ratón.
<head>
<title>Paint</title>
<script>
var canvas;
var context;
var drawing;
function init() {
canvas = document.getElementById("lienzo");
context = canvas.getContext("2d");
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mouseup', mouseUp, false);
drawing = false;
}
function mouseDown(e) {
var x = e.offsetX;
var y = e.offsetY;
context.beginPath();
context.moveTo(x, y);
drawing = true;
}
function mouseMove(e) {
if(drawing) {
var x = e.offsetX;
var y = e.offsetY;
context.lineTo(x, y);
context.stroke();
}
}
function mouseUp(e) {
context.closePath;
drawing = false;
}
function cambiarColor(color) {
context.strokeStyle = color;
}
</script>
</head>
<body onload="init()">
<canvas id="lienzo" width="800" height="600"></canvas>
<table width="800">
<tr>
<td><a href="javascript:cambiarColor('#000000')">Negro</a></td>
<td><a href="javascript:cambiarColor('#FF0000')">Rojo</a></td>
<td><a href="javascript:cambiarColor('#FFAA00')">Naranja</a></td>
<td><a href="javascript:cambiarColor('#FFFF00')">Amarillo</a></td>
<td><a href="javascript:cambiarColor('#00FF00')">Verde</a></td>
<td><a href="javascript:cambiarColor('#0000FF')">Azul</a></td>
</tr>
</table>
</body>
</html>
No hay comentarios:
Publicar un comentario