FlashCanvas: elemento canvas compatível com todos os navegadores

FlashCanvas é uma biblioteca Javascript para conseguir que o elemento canvas do HTML 5 funcione em navegadores que não o suportam, como Internet Explorer 6 al 8.

Por Miguel Angel Alvarez - Tradução de Celeste Veiga


Publicado em: 24/10/11
Valorize este artigo:
Se você está tentando que o elemento canvas do HTML 5 funcione no Internet Explorer em qualquer versão anterior à 9, encontrará em FlashCanvas um complemento ideal. Trata-se de uma biblioteca Javascript que acrescenta suporte a canvas nos navegadores que não o oferecem de maneira nativa.

Canvas é um elemento do HTML5 que serve para fazer todo o tipo de desenhos em páginas web. Sua tradução para o português seria "tela" e não é mais que isso, um espaço onde podemos desenhar e inclusive criar animações. O interessante é que tais desenhos são realizados através de um API de programação criada em Javascript e que permite fazer ilustrações, utilizar fotografias e tudo isso dinamicamente.

Nota: As técnicas de programação Javascript para o desenho no elemento canvas podem ser encontradas descritas em detalhes no Manual de Canvas.

Entretanto, no momento de escrever estas linhas e talvez por muito tempo, nem todos os navegadores oferecem suporte a tal elemento, nem, é claro, ao API Javascript de Canvas. É por isso que, para fazer páginas compatíveis com todos os navegadores, temos que nos esquecer desta característica do HTML5 ou então utilizar alguma biblioteca que ofereça suporte em navegadores antigos.

FlashCanvas é uma das opções que temos para poder utilizar canvas nestes momentos com a total garantia de que nossa página será bem visualizada emInternet Explorer 6, 7 e 8, que não têm suporte a esse elemento. Suas funcionalidades estão baseadas no uso de Flash, de modo que no navegador do usuario terá que estar disponível o plugin de Flash versão 9 em diante.

Neste artigo veremos algumas notas sobre a implementação desta biblioteca e a carga condicional da mesma, que somente deveria se produzir no caso do usuário estar trabalhando com Internet Explorer 6 a 8.

Utilizar FlashCanvas em páginas web

Esta biblioteca possui duas versões: a tradicional e a Pro. Neste artigo vamos explicar como utilizar a tradicional, que é um pouco menos sofisticada, mas é gratuita para qualquer tipo de uso.

Pode-se encontrar a página do projeto em: http://code.google.com/p/flashcanvas/

Vamos ver uma receita para poder utilizar FlashCanvas.

1) Baixar a biblioteca e copiar os arquivos em seu site
Devemos baixar o pacote com as bibliotecas, que contém tudo aquilo que necessitaremos para usar FlashCanvas assim como numerosos exemplos.

No momento, para o que vamos fazer, temos que observar a pasta "bin", que tem os arquivos:

  • flashcanvas.js (a biblioteca Javascript)
  • flashcanvas.swf (a película flash que se utiliza para substituir o elemento canvas)
Esses dois arquivos serão os fundamentais e que você tem que os copiar em algum lugar de seu projeto. Coloque os dois arquivos juntos na mesma pasta e observe que para poder colocar FlashCanvas em funcionamento você terá que saber a rota para chegar ao arquivo "flashcanvas.js"

2) Incluir o script FlashCanvas para versões antigas de Internet Explorer
O primeiro passo é fazer o carregamento da biblioteca Javascript em Internet Explorer 6, 7 e 8. Para isso vamos utilizar um código condicional que só interpreta Internet Explorer.

<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->

Isto está dizendo à Internet Explorer que, se é uma versão anterior à 9, o script Javascript flashcanvas.js.

Nota: Obviamente , você vai ter que editar a rota do script (atributo src="flashcanvas.js"), para colocar o caminho para chegar à pasta onde você colocou a biblioteca js e a película Flash.

3) Começar a usar canvas
Este passo na maioria dos casos é imediato. Ou seja, uma vez incluído o script flashcanvas.js se inicializarão automaticamente os elementos canvas da página, de modo que possamos desenhar sobre eles do mesmo modo como fazíamos em navegadores compatíveis. A graça desta biblioteca é justamente essa, poder utilizar canvas em qualquer navegador não compatível, da mesma maneira como se fosse.

Agora, há dois casos nos que sim se deve inicializar os elementos canvas explicitamente.

  • Quando se cria um elemento canvas dinamicamente mediante Javascript por meio de document.createElement("canvas").
  • Quando se usa um elemento canvas antes que se tenha lançado o evento window.onload

Nota: Na documentação de FlashCanvas, de onde tiramos estas indicações, têm um código que resulta interessante para mostrar como se inicializa um canvas criado dinamicamente com Javascript.

//crio um elemento canvas
var meucanvas = document.createElement("canvas");
//insiro esse elemento dentro de outro elemento que haja na página
document.getElementById("lugarInsercaoElementoCanvas").appendChild(meucanvas);
//se se carregou a biblioteca FlashCanvas
if (typeof FlashCanvas != "undefined") {
   //entao inicializo o elemento canvas explicitamente
   FlashCanvas.initElement(meucanvas);
}

No código anterior, a parte onde se faz a comprovação (typeof FlashCanvas != "undefined") é importante, porque assim nos certificamos de inicializar o canvas com FlashCanvas somente no caso de que essa biblioteca tenha sido carregada. Ou seja, os navegadores que suportam canvas, onde a biblioteca não se tenha carregado, não executarão o código para inicializar o canvas por meio de FlashCanvas.

Assim que podemos começar a trabalhar com Canvas tal como fazemos habitualmente, pois todo o API Javascript relacionado com Canvas estará disponível nos navegadores mais antigos.

Podemos ver um exemplo de página na que colocamos em funcionamento FlashCanvas. Deveria se poder ver o desenho sobre o canvas em qualquer navegador.

O código HTML 5 da página web do exemplo é o seguinte:

<!DOCTYPE html>
<html>
<head>
<title>Testando FlashCanvas</title>
   <!--[if lt IE 9]>
    <script type="text/javascript" src="flashcanvas.js"></script>
   <![endif]-->
   <script language="javascript">
   window.onload = function(){
      var elemento = document.getElementById("meucanvas");
      var contexto = elemento.getContext('2d');
      contexto.fillStyle = '#f5f';
      contexto.fillRect(10,10,90,50);
      contexto.fillStyle = '#5ff';
      contexto.fillRect(35,35,50,90);
      contexto.strokeStyle = 'rgba(200, 80, 0, 0.7)';
      contexto.lineWidth = 5;
      contexto.beginPath();
      contexto.moveTo(50,15);
      contexto.lineTo(130,85);
      contexto.lineTo(50,125);
      contexto.lineTo(25,75);
      contexto.lineTo(25,15);
      contexto.closePath();
      contexto.stroke();
   }
   </script>
</head>
<body>
<canvas id="micanvas" width="150" height="150">
Se você vir isto é que seu canvas não funciona!!
</canvas>
</body>
</html>

De novo, deixo o link para ver o exemplo em funcionamento.

Conclusão

A biblioteca FlashCanvas é uma excelente opção para poder dispor das funcionalidades de Canvas em navegadores antigos onde não estavam presentes. Funciona através de um script Javascript e de uma película Flash que tornam possível desenhar em canvas a partir de qualquer navegador.

O uso não tem muito mistério, pois uma vez incluído o script de FlashCanvas, se poderá utilizar qualquer elemento canvas como se estivéssemos em um navegador que o suporta. O único detalhe é saber incluir esta biblioteca apenas nos navegadores que não suportem canvas, algo que neste artigo fizemos através de condicionais HTML que só entende o Internet Explorer.

No artigo seguinte mostraremos como incluir esta biblioteca de uma maneira um pouco melhor, fazendo uso da biblioteca Modernizr.






Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato