O que é Canvas? Conheça essa fantástica novidade do HTML 5!

Você já ouviu falar num tal de Canvas? Já e não entendeu? Pois vou explicar para você. Em 2009 a W3C anunciou as primeiras especificações do novo HTML, chamado de HTML 5. É meus queridos, preparem-se para botarem seus respectivos cocorutos para trabalharem pois muita coisa nova devemos aprender nessa nova versão HTML.

A alteração mais interessante sem dúvida diz respeito a vídeos e imagens. Para colocar uma tag chamando um vídeo por exemplo não é necessário mais aquele monte de códigos de objeto. Basta um <video>, assim como hoje temos a tag <img>.

A versão de teste do HTML 5 já está rolando por aí e sei que Firefox e Chrome rodam essa versão muito bem. Por isso experimentos feitos coma s novidades do HTML 5 já podem ser encontrados.

Uma delas é a que você vê abaixo:

Trata-se de uma experiência chamada Cloth Simulation, feito por Andrew Hoyer e disponível em seu site. Se você estiver vendo esse post no Firefox, irá notar que podemos mexer essas linhas como um lençol num varal. Se você clicar com o botão direito em cima da imagem irá notar que isso não é flash, não é plugin, active-x, nada disso. É apenas uma tag chamada <canvas>. Com ele é possível gerar linhas, circulos, quadrados e uma infinidade de formas geométricas, combinados com Javascript.

As possibilidades de uso dessa ferramenta para geração e alteração de imagens é fantástica! Nesse site, Canvas Demos, você irá encontrar dezenas de experimentos como esse que mostrei aqui.

Sinta o poder do Canvas, clicando aqui!

Para o alto e Avante!

Por Bruno Ávila » HTML 5

9 comentarios on “O que é Canvas? Conheça essa fantástica novidade do HTML 5!”

  • raffcatalan

    Ótima Bruno, a inserção do Html 5 na web, será um desafio para nós designers, com tantas novidades e possibilidades de combinação, entra em cena a nossa missão, que é de solucionar, intrigar e impressionar cada vez mais a interação do usuário com as páginas web.

    01-02-10 » 7:23 pm »

  • Guilherme

    Fantástico. Fico pensando em como será a web daqui algumas décadas. Do jeito que o negócio ta indo, vai ser mesmo surpreendente.

    01-02-10 » 7:38 pm »

  • Osmair

    Esta dando pal aqui.

    versão firefox 3.0.17

    ——————————-
    document.getElementById(“twitter_update_list”) is null
    [Break on this error] document.getElementById(‘twitter_updat…list’).innerHTML = statusHTML.join(”);\n

    08-02-10 » 4:16 pm »

  • daniel

    Aqui no FF não abriu legal não, fica um propaganda do google adsense no espaço, mas no chrome abriu 100%, fantástico isso, deu vontade de brincar também. Vai dar para juntar minha paixão por desenho com a paixão por códigos e tags ehehe.

    08-02-10 » 8:30 pm »

  • Anderson

    @Osmair Está versão é super antiga, já estamos na 3.6 ^^

    09-02-10 » 5:49 am »

  • jose arnaldo

    Tenho minhas duvidas se isso não vai acabar com o flash…. é esperar para ver!

    09-02-10 » 8:57 am »

  • Clayton de Abreu

    Uma dos atuais medos da Adobe é exatamente a substituição do flash pelo HTML, pra mim isso significa uma coisa: Usar em Apples e fazer a Adobe inovar…
    Bruno vai ter curso de HTML5?

    21-02-10 » 3:29 pm »

  • Bruno Ávila

    Clayton, quem sabe, existe sim a possibilidade. :)

    22-02-10 » 4:46 pm »

  • Priscila

    Bom dia, gostaria de saber informações sobre curso de aperfeiçoamento do HTML-5 e do Canvas..
    Bruno vc sabe onde posso encontrar.

    21-05-10 » 9:40 am »

Comente!