Elemento Canvas

A tela elemento faz parte do HTML5 e permite, dinâmica programável de processamento de formas 2D e bitmap imagens. É um nível baixo, o modelo processual que atualiza um bitmap e não tem um built-in gráfico de cena.

Uso

Tela composta de uma região drawable definido no código HTML com altura, largura e atributos. JavaScript código pode acessar a área através de um conjunto completo de funções de desenho similar aos de outros comuns APIs 2D, permitindo gráficos gerados dinamicamente. Algumas aplicações previstas incluem gráficos de tela de construção, animações, jogos e composição da imagem.

Exemplo

O código a seguir cria um elemento de lona em uma página HTML:

id = "exemplo" width = "200" altura = "200" >

Este texto é exibido se o navegador não oferece suporte a HTML5 Canvas.

< / canvas>

Usando o JavaScript, você pode desenhar na tela:

var exemplo = documento. getElementById ( 'exemplo' ) ;

var quadro = exemplo. getContext ( '2 d ' ) ;

contexto. FillStyle = "rgb (255,0,0)" ;

. contexto fillRect ( 30 , 30 , 50 , 50 ) ;

Este código desenha um retângulo vermelho na tela.

Canvas versus Scalable Vector Graphics (SVG)

SVG é um padrão mais adiantado para desenhar formas em browsers. No entanto, SVG é um nível superior, fundamentalmente, porque cada forma desenhada é lembrado como um objeto em um gráfico de cena ou Document Object Model , que é posteriormente processado para um bitmap. Isto significa que se os atributos de um objeto SVG são alteradas, o navegador automaticamente re-renderizar a cena.

No exemplo acima, uma vez que o retângulo é desenhado, o facto de ter sido desenhada é esquecido pelo sistema. Se a sua posição fosse mudado, toda a cena teria de ser redesenhado, incluindo quaisquer objetos que possam ter sido coberta pelo retângulo. Mas, no caso equivalente SVG, pode simplesmente mudar a posição atributos do rectângulo e do navegador seria determinar como redesenhar-lo. Existem outras bibliotecas JavaScript que adicionam recursos gráfico de cena para o elemento Canvas. Também é possível pintar uma tela em camadas e, em seguida, recriar camadas específicas.

Imagens SVG são representados em XML , e cenas complexas podem ser criadas e mantidas com ferramentas de edição XML.

O gráfico de cena SVG permite que manipuladores de eventos a ser associados com os objetos, portanto, um retângulo pode responder a um onClick evento. Para obter a mesma funcionalidade com lona, ​​deve-se manualmente jogo as coordenadas do clique do rato com as coordenadas do retângulo desenhado para determinar se ele foi clicado.

Conceitualmente, a lona é um protocolo de nível inferior sobre a qual SVG pode ser construída. [ carece de fontes? ] No entanto, este não é (normalmente) a jurisprudência, que são padrões independentes. A situação é complicada porque existem bibliotecas gráfico de cena para a tela, SVG e tem algumas funcionalidades de manipulação de bitmap.

Reações

No momento da sua introdução no elemento canvas foi recebido com reações diversas pela comunidade web standards. Houve argumentos contra a decisão da Apple de criar um novo elemento de propriedade, em vez de apoiar o SVG padrão. Existem outras preocupações sobre a sintaxe, por exemplo, a ausência de um espaço.

A propriedade intelectual sobre tela

Em 14 de março de 2007, desenvolvedor WebKit Dave Hyatt enviado um e-mail's Senior Patente da Apple Counsel, Helene Plotka Workman, que afirmava que a Apple reservou todos de propriedade intelectual direitos relativos a aplicações Web de WHATWG 1,0 rascunho de trabalho, datado de 24 março de 2005, Seção 10.1, intitulado "Gráficos: A tela de bitmap", mas deixou a porta aberta para licenciamento de patentes devem ser transferidos a especificação de um conjunto de padrões com uma política de patentes formal.

Isso causou muita discussão entre os desenvolvedores web, e as questões levantadas sobre WHATWG é a falta de uma política de patentes em comparação com a World Wide Web Consortium (W3C) é explícito favorecimento de licenças livres de royalties. Apple posteriormente divulgadas as patentes sob W3C livres de licenciamento de patentes termos-o. A revelação significa que a Apple é obrigada a fornecer sem licenciamento royalties da patente, sempre que o elemento Canvas se torna parte de uma recomendação da W3C futuro criado pelo HTML de trabalho grupo.

Suporte

O elemento é suportado pelas versões atuais do Mozilla Firefox, Google Chrome, Internet Explorer, Safari e Opera. Versões anteriores do Internet Explorer não suportam a tela, porém o Google e Mozilla plugins estão disponíveis.