Com a chegada do HTML5, chegaram também algumas novidades que já anunciámos anteriormente no artigo de Introdução ao HTML5 – O que há de novo?. Entre elas, está a tag canvas, que permite que através da utilização de scripts, como Javascript,  se produzam gráficos ou ilustrações em 2d. A tag canvas é suportada pelo Mozilla Firefox, Opera 9, Safari, Internet Explorer 9 e Google Chrome. As versões anteriores do Internet Explorer e outros não suportam a tag canvas, e isso levou a que houvesse a necessidade de criar uma solução. A solução foi criada e chama-se Explorer Canvas.

O QUE É O EXPLORER CANVAS?

Explorer Canvas é um Javascript que poderá inserir nas suas páginas para habilitar o suporte à tag canvas. Pode ser utilizado para criar imagens bitmap, ilustrações e animações. A tag canvas foi introduzida primariamente pela Apple para o painel de controlo do Mac OS X e mais tarde foi implementado nos browsers Safari e Google Chrome.

COMO COMEÇAR?

A utilização do Explorer Canvas é extremamente simplicista. Apenas necessita de alguns conhecimentos básicos de HTML e Javascript. Para começar deverá introduzir o ficheiro excanvas.js antes de alguma coisa ser processada na sua página. Para isso é recomendável introduzir o código no <head>.

<head>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
</head>

COMO DAR USO À IMAGINAÇÃO?

Existe um mundo de possibilidades com a tag canvas. Desde transformar, cores, linhas, sombras, formas básicas (rectângulos), texto até à manipulação de imagens e pixeis, você tem um extenso leque de opções que poderá utilizar para fazer as suas criações e dar asas à imaginação. Primeiro terá de criar o elemento canvas:

<canvas id="example" width="200" height="200">
O que inserir aqui irá ser mostrado nos browsers que não suportarem a tag canvas ou HTML5.
</canvas>

Neste caso criàmos um elemento canvas quadrado, com 200 pixeis de lado. Utilizando Javascript, poderemos começar a desenhar dentro do elemento canvas.

var example = document.getElementById('exemplo');
var context = example.getContext('2d');
context.fillStyle = "rgb(255,0,0)";
context.fillRect(50, 50, 80, 100);

Com o código Javascript acima, criámos um  rectângulo vermelho com 80×100. De notar que este elemento que acabámos de criar é um elemento completo com cor. Se pretender criar apenas uma linha, terá de usar strokeRect ao invés de fillRect. Extremamente simples!

Para um guia completo da utilização da tag HTML5 <canvas>, recomendamos fortemente uma visita aqui

RECOMENDAÇÃO

A utilização da tag canvas poderá ser uma alternativa a muitos conteúdos flash que tem presentes no seu website. Como referimos no artigo 5 questões que prometem mudar a sua forma de criar sites! muitas pessoas influentes estão a abolir a utilização de Flash nos seus websites, chegando inclusivamente a não incluir Flash nos seus produtos, como é o caso da Apple e o iPad. Mais recentemente, o Mozilla Firefox 4 foi lançado sem flash, ao contrário do Google Chrome que continua a vir com o Flash de raiz. A sugestão que gostaríamos de fazer é que pondere qual a melhor forma de apresentar determinados conteúdos aos seus leitores. A chegada do HTML5 com estas novas funcionalidades foi um grande passo na forma como o conteúdo web é produzido e posteriormente apresentado aos leitores, e aos olhos deles, a utilização das mais recentes tecnologias é sempre bem-vinda. Dê um look actual e moderno ao seu website, e garantidamente irá subir alguns pontos na opinião dos seus visitantes. Vale a pena pensar sobre isto!

E VOCÊ, INTRODUZ SUPORTE AO HTML5 <CANVAS> NOS SEUS WEBSITES?

Certamente que você não quer restringir a visualização dos seus conteúdos criádos com o a tag canvas apenas aos visitantes que utilizam browsers com suporte para tal. É certo que com o avançar do tempo o número de utilizadores a navegar com browsers sem suporte para HTML5 irá diminuir e eventualmente extinguir-se (seria ótimo!). Mas quem sabe se o seu próximo leitor assíduo não está a utilizar um navegador sem suporte, e irá ficar com má ideia do seu website por causa disso? Previna-se e dê suporte a todos!

Abraço e até já!

 

Autor: Diogo Espinha

Blog do Autor | Artigos do Autor:

Workaholic e totalmente viciado em computadores, Internet e desporto motorizado. Adora praticar desporto, é um curioso da programação em PHP, CSS e HTML5 e não dispensa a companhia do seu Mac OSX 86 Snow Leopard!

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. JOAO LUIS
    3 de abril de 2014

    Cara, não estou conseguindo assistir filme no meu Lumia 520. Utilizo o UC Browser e acesso o site Mega Filmes HD. Toda vez que tento fazê-lo, surgi uma mensagem de requerimento de canvas.js ou excanvas.js, algo assim. Como resolver isso?


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz