Mídias e Gráficos com HTML 5 e JS pt. 2

Apresentação em tema: "Mídias e Gráficos com HTML 5 e JS pt. 2"— Transcrição da apresentação:

1 Mídias e Gráficos com HTML 5 e JS pt. 2
Prof. Rafael Vieira THIS WORK IS LICENSED UNDER THE CREATIVE COMMONS ATTRIBUTION-SHAREALIKE 4.0 INTERNATIONAL LICENSE. TO VIEW A COPY OF THIS LICENSE, VISIT OR SEND A LETTER TO CREATIVE COMMONS, PO BOX 1866, MOUNTAIN VIEW, CA 94042, USA. CREATED BY RAFAEL S. T. VIEIRA

2 Definição Há duas maneiras de gerar desenhos dinâmicos no HTML: Objeto Scalable Vector Graphics (SVG): permite definir gráficos vetoriais no formato XML. Objeto Canvas do HTML5: desenhar gráficos diversos sem formato específico. Ler mais:

3 <svg width="800" height="610">
SVG: Primitivas Gramática grande e complexa que possui primitivas de desenho, suporte para texto, animação e curvas. <svg width="800" height="610"> <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> <rect width="400" height="300" style="fill:rgb(0,255,255);stroke-width:3;stroke:rgb(0,0,0)" /> <circle cx="50" cy="50" r="40" stroke="black" stroke- width="3" fill="red" /> </svg> Mais primitivas: Rectangle <rect> Circle <circle> Ellipse <ellipse> Line <line> Polyline <polyline> Polygon <polygon> Path <path>

4 <svg width="800" height="610">
SVG: Path Path atua como um pincel ou caneta desenhando qualquer primitiva, curva ou objeto desejado segundo uma série de instruções. <svg width="800" height="610"> <path id="lineAB" d="M l " stroke="red" stroke-width="3" fill="none" /> <path id="lineBC" d="M l " stroke="red" <path d="M l 150 0" stroke="green" stroke- width="3" fill="none" /> <path d="M q " stroke="blue" stroke-width="5" fill="none" /> </svg> Comandos disponíveis: M = mover para L = linha para H = linha horizontal V = linha vertical C = curva para S = curva suave para Q = curva Bézier quadratica T = curva Bézier quadratica suave A = arco elíptico Z = fecha caminho

5 <svg width="800" height="610">
SVG: Texto Escreve texto na página WEB de forma dinâmica que pode ser transformado. <svg width="800" height="610"> <g font-size="30" font-family="sans-serif" fill="black" stroke="none" text-anchor="middle"> <text x="0" y="15" fill="red">Eu amo SVG!</text> </g> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">Eu amo SVG!</text> </svg> G é usado para agrupar elementos Referência completa:

6 <svg width="800" height="610">
SVG: Animação São comandos feitos especificamente para produzir animações dinâmicas no código HTML. <svg width="800" height="610"> <rect x="10" y="10" height="110" width="110" style="stroke:#ff0000; fill: #0000ff"> <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from=" " to=" " repeatCount="indefinite" /> </rect> </svg> Meios de animação: <set> <animate> <animateColor> <animateTransform> <animateMotion> Mais exemplos:

7 Var canvas = document.getElementById("myCanvas");
Canvas HTML 5: Desenho O elemento <canvas> é usado para desenhar gráficos dinâmicos com JS por meio de uma API gráfica. Esta possui vários métodos para desenhar caminhos, retângulos, círculos, texto e imagens. Var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); var canvas = document.getElementById("myCanvas"); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); Mais comandos: Rect() Arc() lineTo() MoveTo() DrawImage() Data()

8 var canvas = document.getElementById("myCanvas");
Canvas HTML 5: Texto A inserção de textos também é feita por comandos da API gráfica. var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Olá mundo",10,50);

9 Canvas HTML 5: Desenhar Imagens
Imagens podem ser adicionadas dinamicamente com a API. window.onload = function() { var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); };

10 Canvas HTML 5: Animação Também é possível construir animações com o objeto canvas, de fato, a API possível em um Canvas é tão rica que é possível construir inclusive jogos. BR/docs/Web/Guide/HTML/Canvas_tutor ial/Basic_animations Jogo com HTML 5:

11 Fim rafastv.responde@gmail.com