Ferramentas para Animações de Sites - Canvas

Post on 20-Jan-2017

52 views 2 download

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

• id : Para referenciar o objeto nos scripts

• width : Largura do desenho

• heigth : Altura do desenho

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

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.

fillStyle()

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

fillRect()

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

• 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

• 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/)