Canvas. <canvas id= meucanvas width= 200 height= 100 ></canvas>

Transcrição

1

2 Canvas Uma tela bitmap dependente de resolução que pode ser usada para renderização de textos, gráficos, jogos ou outras imagens em tempo real. Permite desenhar elementos gráficos via Javascript. Desenha através da API de tela 2D. Agora vamos ver a implementação... <canvas id= meucanvas width= 200 height= 100 ></canvas> Javascript var canvas = document.getelementbyid( meucanvas ); var context = canvas.getcontext( 2d );

3 Canvas Linha context.moveto(0,0); context.lineto(200,100); context.stroke();

4 Canvas Círculo context.beginpath(); context.fillstyle = rgb(0, 0, 0) ; context.arc(95, 50, 40, 0, 2 * Math.PI); context.fill();

5 Canvas Retângulo context.fillrect(50, 20, 100, 60);

6 Canvas Texto context.font = 30px Arial ; context.filltext( Hello World, 10, 50);

7 Canvas Dégradés var gradient = context.createlineargradient(0, 0, 0, 145); gradient.addcolorstop(1, black ); gradient.addcolorstop(0, white ); context.fillstyle = gradient; context.fillrect(5, 5, 145, 145);

8 E muito mais... Canvas

9 Canvas vs SVG Quando usar Canvas e quando usar SVG SVG O conteúdo é acessível a leitores de tela. O gráfico é escalável, não perde resolução ou serrilha ao redimensionar. O conteúdo é acessível via DOM Canvas A performance é muito superior ao SVG na maioria dos casos. É fácil desenhar via Javascript. Em SVG, é preciso fazer seu script escrever XML para você. Com Canvas, você só manda desenhar, e pronto. É possível salvar imagens fora da tela.

10 Server-Sent Events Faz com que o servidor dispare o envio de dados ao agente de usuário. Para isso, cria-se, no agente de usuário, um objeto EventSource. var eventsource = new EventSource( exemploes.jsp"); Abre uma conexão HTTP para exemploes.jsp Captura eventos enviados pelo servidor Para cada evento, será disparado o evento onmessage do objeto EventSource eventsource.onmessage = function(e){ } document.getelementbyid( dados ).innerhtml += e.data + <br/>

11 Server-Sent Events Define o Content-Type para text/event-stream A página não deve armazenar cachê Saída de dados para envio sempre começa com data: Realize flush nos dados de saída <?php header('content-type: text/event-stream'); header('cache-control: no-cache'); $time = date('r'); echo "data: The server time is: {$time}\n\n"; flush();?>

12 Server-Sent Events Exemplos: Java (JSP) <%page import= java.util.date %> <% response.setcontenttype("text/event-stream ); response.setheader( Cache-Control, no-cache ); response.setdateheader( Expires, -1); response.getwriter().write( Horário do Servidor: + new Date() + \n ); response.getwriter().flush() %>

13 Server-Sent Events Exemplos: PHP <?php header('content-type: text/event-stream'); header('cache-control: no-cache'); $time = date('r'); echo "data: Horário do Servidor: {$time}\n\n"; flush();?>

14 Server-Sent Events Exemplos: ASP (VB) <% Response.ContentType="text/event-stream" Response.Expires=-1 Response.Write("data: " & now()) Response.Flush() %>

15 Server-Sent Events Prefixo data: indica que o que segue são os dados da mensagem Existe também o prefixo id Utilizando o prefixo id em suas mensagens, caso o agente de usuário perca a conexão, ao reconectar, ele enviará o valor do último id no header HTTP Last-Event-ID data: HTML5 id: 1 data: Curso de HTML5 data: da IFOMEP id: 2 data: aprendendo Server-Sent Events id: 3

16 DOM e HTML5 DOM: Document Object Model (Modelo de Objeto do Documento). Interface entre a linguagem Javascript e os objetos do HTML. DOM é o método padrão para construção de aplicações ricas com Javascript e é amplamente conhecido e utilizado. Os primeiros navegadores a incorporar um motor de Javascript.

17 DOM e HTML5 getelementsbyclassname destaques = document.getelementsbyclassname( destaque ) innerhtml document.getelementbyid( transporte ).innerhtml += <li>carro</li> activeelement e hasfocus() document.hasfocus() document.head document.head

18 DOM e HTML5 getselection window.getselection(); anchornode: O elemento que contém o início da seleção focusnode: O elemento que contém o final da seleção selectallchildern(parentnode): Seleciona todos os filhos de parentnode deletefromdocument(): Remove a seleção do documento rangecount: A quantidade de intervalos na seleção getrangeat(index): Retorna o intervalo na posição index addrange(range): Adiciona um intervalo à seleção removerange(range): Remove um intervalo da seleção

19 DOM e HTML5 Intervalos de seleção deletecontent(): Remove o conteúdo do intervalo setstart(parent,offset): Seta o início do intervalo para o caractere na posição offset, dentro do elemento DOM parente setend(parent,offset): Seta o final do intervalo para o caractere na posição offset, dentro do elemento DOM parente

20 Até a próxima aula...