Ferramentas para Animações de Sites - Canvas

8

Transcript of Ferramentas para Animações de Sites - Canvas

Page 1: Ferramentas para Animações de Sites - Canvas
Page 2: Ferramentas para Animações de Sites - Canvas

• id : Para referenciar o objeto nos scripts

• width : Largura do desenho

• heigth : Altura do desenho

Page 3: Ferramentas para Animações de Sites - Canvas

http://www.w3schools.com/html/html5_canvas.asp

Page 4: Ferramentas para Animações de Sites - Canvas

getContext()

• "2d", CanvasRenderingContext2D, bidimensional;• "webgl" (ou "experimental-webgl"), WebGLRenderingContext, 3D. (para browsers que

implementam WebGL version 1 (OpenGL ES 2.0));• "webgl2" (or "experimental-webgl2"), WebGL2RenderingContext, 3D (para browswers

que implementam WebGL version 2 (OpenGL ES 3.0)) ;• "bitmaprenderer", ImageBitmapRenderingContext, só fornece funcionalidade para

substituir o conteúdo da tela com uma determinada imagem de bitmap, ImageBitmap.

Page 5: Ferramentas para Animações de Sites - Canvas

fillStyle()

• Define ou retorna a cor, gradiente ou padrão usado para preencher o desenho.

Page 6: Ferramentas para Animações de Sites - Canvas

fillRect()

• Desenha um retângulo preenchido, padrão preto;• Usado para inserir cor, gradiente ou padrão.

Page 7: Ferramentas para Animações de Sites - Canvas

• Música de fundo • Mensagem de fim de jogo + Placar (Reiniciar jogo)• Vidas (3)• Som quando comer a maçã• Som quando morrer• Níveis de velocidade

Page 8: Ferramentas para Animações de Sites - Canvas

• HTML5 Canvas (http://www.w3schools.com/html/html5_canvas.asp)

• HTML5 – Guia do desenvolvedor para HTML5 Canvas (https://msdn.microsoft.com/pt-br/library/dn151487.aspx)

• Canvas Element (https://en.wikipedia.org/wiki/Canvas_element)

• HTML5 Canvas Tutorial: An Introduction (https://www.sitepoint.com/html5-canvas-tutorial-introduction/)