SlideShare uma empresa Scribd logo
• id : Para referenciar o objeto nos scripts
• width : Largura do desenho
• heigth : Altura do desenho
http://www.w3schools.com/ht
ml/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/)

Mais conteúdo relacionado

Destaque

Cultivation and marketing of aswagandha new
Cultivation and marketing of aswagandha newCultivation and marketing of aswagandha new
Cultivation and marketing of aswagandha new
Dr.Sunkesula Balavenkata Krishna
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
Israel Messias
 
Portafolio anatomia
Portafolio anatomiaPortafolio anatomia
Portafolio anatomia
Kristy Vega
 
Developing the Future of the Landscapes Approach, 
2015 and Beyond: Indonesia...
Developing the Future of the Landscapes Approach, 
2015 and Beyond: Indonesia...Developing the Future of the Landscapes Approach, 
2015 and Beyond: Indonesia...
Developing the Future of the Landscapes Approach, 
2015 and Beyond: Indonesia...
CIFOR-ICRAF
 
LÓGICO MATEMÁTICAS EN INFANTIL
LÓGICO MATEMÁTICAS EN INFANTILLÓGICO MATEMÁTICAS EN INFANTIL
LÓGICO MATEMÁTICAS EN INFANTIL
ALICIA PEINADOR SÁNCHEZ
 
Potential Energy
Potential EnergyPotential Energy
Potential Energy
Ninu George
 
Estudio clínico Osteobios en columna vertebral
Estudio clínico Osteobios en columna vertebralEstudio clínico Osteobios en columna vertebral
Estudio clínico Osteobios en columna vertebral
Naturpharma (Medicina Biológica)
 
Louise bogan (3)
Louise bogan (3)Louise bogan (3)
Louise bogan (3)
sanojraju
 
AgileMeetup_2016-03-10_KH
AgileMeetup_2016-03-10_KHAgileMeetup_2016-03-10_KH
AgileMeetup_2016-03-10_KH
Nándor Kemény, CSM, PMP
 
resume mike 1
resume mike 1resume mike 1
resume mike 1
Mike Kirby
 
Elementos de Ecologia Urbana - Virginio Bettini
Elementos de Ecologia Urbana - Virginio BettiniElementos de Ecologia Urbana - Virginio Bettini
Elementos de Ecologia Urbana - Virginio Bettini
Proyectar Ciudad
 
Trabalho biologia peixes ósseos
Trabalho biologia   peixes ósseosTrabalho biologia   peixes ósseos
Trabalho biologia peixes ósseos
Salada Frutas
 

Destaque (12)

Cultivation and marketing of aswagandha new
Cultivation and marketing of aswagandha newCultivation and marketing of aswagandha new
Cultivation and marketing of aswagandha new
 
CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2CSS - Cascading Style Sheets - 2
CSS - Cascading Style Sheets - 2
 
Portafolio anatomia
Portafolio anatomiaPortafolio anatomia
Portafolio anatomia
 
Developing the Future of the Landscapes Approach, 
2015 and Beyond: Indonesia...
Developing the Future of the Landscapes Approach, 
2015 and Beyond: Indonesia...Developing the Future of the Landscapes Approach, 
2015 and Beyond: Indonesia...
Developing the Future of the Landscapes Approach, 
2015 and Beyond: Indonesia...
 
LÓGICO MATEMÁTICAS EN INFANTIL
LÓGICO MATEMÁTICAS EN INFANTILLÓGICO MATEMÁTICAS EN INFANTIL
LÓGICO MATEMÁTICAS EN INFANTIL
 
Potential Energy
Potential EnergyPotential Energy
Potential Energy
 
Estudio clínico Osteobios en columna vertebral
Estudio clínico Osteobios en columna vertebralEstudio clínico Osteobios en columna vertebral
Estudio clínico Osteobios en columna vertebral
 
Louise bogan (3)
Louise bogan (3)Louise bogan (3)
Louise bogan (3)
 
AgileMeetup_2016-03-10_KH
AgileMeetup_2016-03-10_KHAgileMeetup_2016-03-10_KH
AgileMeetup_2016-03-10_KH
 
resume mike 1
resume mike 1resume mike 1
resume mike 1
 
Elementos de Ecologia Urbana - Virginio Bettini
Elementos de Ecologia Urbana - Virginio BettiniElementos de Ecologia Urbana - Virginio Bettini
Elementos de Ecologia Urbana - Virginio Bettini
 
Trabalho biologia peixes ósseos
Trabalho biologia   peixes ósseosTrabalho biologia   peixes ósseos
Trabalho biologia peixes ósseos
 

Semelhante a Ferramentas para Animações de Sites - Canvas

Defesa TC V1.2.1
Defesa TC V1.2.1Defesa TC V1.2.1
Defesa TC V1.2.1
B Bellaver
 
Pew2012
Pew2012Pew2012
Pew2012
Nuno Ribeiro
 
Canvas element
Canvas elementCanvas element
Canvas element
Davidson Fellipe
 
Grails
GrailsGrails
Grails
Alex Guido
 
Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.
Alex Guido
 
Introdução à OpenGL
Introdução à OpenGLIntrodução à OpenGL
Introdução à OpenGL
Herbet Ferreira Rodrigues
 
CSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidadesCSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidades
Fellyph Cintra
 
Desenvolvimento de ambientes 3D para Web usando Three JS
Desenvolvimento de ambientes 3D para Web usando Three JSDesenvolvimento de ambientes 3D para Web usando Three JS
Desenvolvimento de ambientes 3D para Web usando Three JS
Nathalia Sautchuk Patricio
 
Metal
MetalMetal
Metal
xissburg
 
JavaME - Aula 2
JavaME - Aula 2JavaME - Aula 2
JavaME - Aula 2
Elenilson Vieira
 
ArcGIS 10.3: Iniciante no ModelBuilder - Conversão de Float32 para UInt16
ArcGIS 10.3: Iniciante no ModelBuilder - Conversão de Float32 para UInt16ArcGIS 10.3: Iniciante no ModelBuilder - Conversão de Float32 para UInt16
ArcGIS 10.3: Iniciante no ModelBuilder - Conversão de Float32 para UInt16
Jorge Santos
 
JavaME
JavaMEJavaME
Viewport (OpenGL)
Viewport (OpenGL)Viewport (OpenGL)
Viewport (OpenGL)
Herbet Ferreira Rodrigues
 
Desenvolvendo games multiplataforma
Desenvolvendo games multiplataformaDesenvolvendo games multiplataforma
Desenvolvendo games multiplataforma
André Santee
 
Palestra
PalestraPalestra
Minicurso de HTML5 Canvas -
Minicurso de HTML5 Canvas - Minicurso de HTML5 Canvas -
Minicurso de HTML5 Canvas -
Jose Augusto Cintra
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
Carlos Santos
 
Manual de Autocad 14 avançado - aula 05 - Trabalhar com imagens raster
Manual de Autocad 14 avançado - aula 05 - Trabalhar com imagens rasterManual de Autocad 14 avançado - aula 05 - Trabalhar com imagens raster
Manual de Autocad 14 avançado - aula 05 - Trabalhar com imagens raster
alexandre ribeiro
 
Aulas Google Android
Aulas Google AndroidAulas Google Android
Aulas Google Android
Iury Teixeira
 
Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
elliando dias
 

Semelhante a Ferramentas para Animações de Sites - Canvas (20)

Defesa TC V1.2.1
Defesa TC V1.2.1Defesa TC V1.2.1
Defesa TC V1.2.1
 
Pew2012
Pew2012Pew2012
Pew2012
 
Canvas element
Canvas elementCanvas element
Canvas element
 
Grails
GrailsGrails
Grails
 
Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.Desenvolvimento Ágil com Grails.
Desenvolvimento Ágil com Grails.
 
Introdução à OpenGL
Introdução à OpenGLIntrodução à OpenGL
Introdução à OpenGL
 
CSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidadesCSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidades
 
Desenvolvimento de ambientes 3D para Web usando Three JS
Desenvolvimento de ambientes 3D para Web usando Three JSDesenvolvimento de ambientes 3D para Web usando Three JS
Desenvolvimento de ambientes 3D para Web usando Three JS
 
Metal
MetalMetal
Metal
 
JavaME - Aula 2
JavaME - Aula 2JavaME - Aula 2
JavaME - Aula 2
 
ArcGIS 10.3: Iniciante no ModelBuilder - Conversão de Float32 para UInt16
ArcGIS 10.3: Iniciante no ModelBuilder - Conversão de Float32 para UInt16ArcGIS 10.3: Iniciante no ModelBuilder - Conversão de Float32 para UInt16
ArcGIS 10.3: Iniciante no ModelBuilder - Conversão de Float32 para UInt16
 
JavaME
JavaMEJavaME
JavaME
 
Viewport (OpenGL)
Viewport (OpenGL)Viewport (OpenGL)
Viewport (OpenGL)
 
Desenvolvendo games multiplataforma
Desenvolvendo games multiplataformaDesenvolvendo games multiplataforma
Desenvolvendo games multiplataforma
 
Palestra
PalestraPalestra
Palestra
 
Minicurso de HTML5 Canvas -
Minicurso de HTML5 Canvas - Minicurso de HTML5 Canvas -
Minicurso de HTML5 Canvas -
 
LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04LabMM3 - Aula teórica 04
LabMM3 - Aula teórica 04
 
Manual de Autocad 14 avançado - aula 05 - Trabalhar com imagens raster
Manual de Autocad 14 avançado - aula 05 - Trabalhar com imagens rasterManual de Autocad 14 avançado - aula 05 - Trabalhar com imagens raster
Manual de Autocad 14 avançado - aula 05 - Trabalhar com imagens raster
 
Aulas Google Android
Aulas Google AndroidAulas Google Android
Aulas Google Android
 
Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
 

Mais de Israel Messias

CMS
CMSCMS
Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente Web
Israel Messias
 
Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2
Israel Messias
 
Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1
Israel Messias
 
Websockets
WebsocketsWebsockets
Websockets
Israel Messias
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - Modelos
Israel Messias
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-Servidor
Israel Messias
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dados
Israel Messias
 
Ferramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioFerramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - Áudio
Israel Messias
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - Medidas
Israel Messias
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - Revisão
Israel Messias
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
Israel Messias
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
Israel Messias
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTP
Israel Messias
 
HTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosHTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivos
Israel Messias
 
HTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - FormulárioHTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - Formulário
Israel Messias
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review
Israel Messias
 
HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5
Israel Messias
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
Israel Messias
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
Israel Messias
 

Mais de Israel Messias (20)

CMS
CMSCMS
CMS
 
Programação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente WebProgramação Multiplataforma em Ambiente Web
Programação Multiplataforma em Ambiente Web
 
Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2Programação Orientada a Objetos (POO) com PHP - Parte 2
Programação Orientada a Objetos (POO) com PHP - Parte 2
 
Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1Programação Orientada a Objetos (POO) com PHP - Parte 1
Programação Orientada a Objetos (POO) com PHP - Parte 1
 
Websockets
WebsocketsWebsockets
Websockets
 
Arquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - ModelosArquitetura Cliente-Servidor - Modelos
Arquitetura Cliente-Servidor - Modelos
 
Arquitetura Cliente-Servidor
Arquitetura Cliente-ServidorArquitetura Cliente-Servidor
Arquitetura Cliente-Servidor
 
Arquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dadosArquitetura Cliente-Servidor - Banco de dados
Arquitetura Cliente-Servidor - Banco de dados
 
Ferramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - ÁudioFerramentas para Animações de Sites - Áudio
Ferramentas para Animações de Sites - Áudio
 
CSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - MedidasCSS - Cascading Style Sheets - Medidas
CSS - Cascading Style Sheets - Medidas
 
CSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - RevisãoCSS - Cascading Style Sheets - Revisão
CSS - Cascading Style Sheets - Revisão
 
CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1CSS - Cascading Style Sheets - 1
CSS - Cascading Style Sheets - 1
 
HTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - ReviewHTML - HyperText Markup Language - Review
HTML - HyperText Markup Language - Review
 
HTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTPHTML - HyperText Markup Language - FTP
HTML - HyperText Markup Language - FTP
 
HTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivosHTML - HyperText Markup Language - Organização de arquivos
HTML - HyperText Markup Language - Organização de arquivos
 
HTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - FormulárioHTML - HyperText Markup Language - Formulário
HTML - HyperText Markup Language - Formulário
 
HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review HTML - HyperText Markup Language - 4 - Review
HTML - HyperText Markup Language - 4 - Review
 
HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5HTML - HyperText Markup Language - HTML5
HTML - HyperText Markup Language - HTML5
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 

Ferramentas para Animações de Sites - Canvas

  • 1.
  • 2. • id : Para referenciar o objeto nos scripts • width : Largura do desenho • heigth : Altura do desenho
  • 4. 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.
  • 5. fillStyle() • Define ou retorna a cor, gradiente ou padrão usado para preencher o desenho.
  • 6. fillRect() • Desenha um retângulo preenchido, padrão preto; • Usado para inserir cor, gradiente ou padrão.
  • 7. • 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
  • 8. • 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/)