Vamos começar a trabalhar com HTML 5?
Primeiro, vou falar de canvas! :)
Canvas é uma tag que define uma "área gráfica" no HTML, ou seja, um pedaço do HTML onde é possível desenhar figuras ou imagens "dinamicamente":
<!DOCTYPE HTML>
<html>
<head>
<title>Canvas!</title>
</head>
<body>
<canvas height="500" width="500" id="area_de_desenho">
</canvas>
</body>
</html>
Atualmente, para desenhar no canvas, utiliza-se scripts (principalmente javascript).
Por exemplo, vamos desenhar um circulo:
<script>
//Obtem o canvas
var areaDesenho = document.getElementById("area_de_desenho");
//Contexto 2D (a gente utiliza isso para desenhar...)
var context = areaDesenho.getContext("2d");
//Iniciando o desenho
context.beginPath();
//Definimos a cor do desenho
context.fillStyle = "rgb(100,100,100)";
//Desenhamos o circulo (parametros: posição horizontal, posição vertical, raio, angulo inicial, angulo final, se sentido anti-horário ou não)
context.arc(100, 100, 50, 0, Math.PI * 2, false);
context.fill();
//"Fechando" o desenho
context.closePath();
</script>
Legal, não?
Imagina desenhar várias vezes de tempos em tempos:
<script>
//Obtem o canvas
var areaDesenho = document.getElementById("area_de_desenho");
//Contexto 2D (a gente utiliza isso para desenhar...)
var context = areaDesenho.getContext("2d");
var colors = ["rgb(255,0,0)","rgb(0,255,0)","rgb(0,0,255)","rgb(0,0,0)","rgb(100,100,100)"];
//Desenha circulos randomicos de 0.5 a 0,5 segundos
setInterval(function() {
//Inicia o desenho
context.beginPath();
//Escolhe uma cor
var colorNumber = parseInt(Math.random() * 5);
context.fillStyle = colors[colorNumber];
//Escolhe uma posição
var x = parseInt(Math.random() * 500);
var y = parseInt(Math.random() * 500);
//Desenho o circulo
context.arc(x, y, 50, 0, Math.PI * 2, false);
context.fill();
//Fecha o desenho
context.closePath();
}, 500);
</script>
Mais legal ainda! :)
Quer saber mais? Veja no site oficial do W3C:
http://dev.w3.org/html5/2dcontext/
Nenhum comentário:
Postar um comentário