Elemento de tela - Canvas element

O elemento canvas faz parte do HTML5 e permite a renderização dinâmica e programável de formas 2D e imagens de bitmap . É um modelo de procedimento de baixo nível que atualiza um bitmap . O HTML5 Canvas também ajuda na criação de jogos 2D.

História

O Canvas foi inicialmente introduzido pela Apple para uso em seu próprio componente Mac OS X WebKit em 2004, potencializando aplicativos como widgets do Dashboard e o navegador Safari . Posteriormente, em 2005, foi adotado na versão 1.8 dos navegadores Gecko e no Opera em 2006, e padronizado pelo Grupo de Trabalho de Tecnologia de Aplicativos de Hipertexto da Web (WHATWG) em novas especificações propostas para tecnologias da Web de próxima geração.

Uso

A canvasconsiste em uma região drawable definida em código HTML com atributos de altura e largura . O código JavaScript pode acessar a área por meio de um conjunto completo de funções de desenho semelhantes às de outras APIs 2D comuns, permitindo, assim, gráficos gerados dinamicamente. Alguns usos antecipados da tela incluem a construção de gráficos, animações, jogos e composição de imagens.

Exemplo

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

<canvas id="example" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>

Usando JavaScript, você pode desenhar na tela:

var example = document.getElementById('example');
var context = example.getContext('2d');
context.fillStyle = 'red';
context.fillRect(30, 30, 50, 50);

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

A API do Canvas também fornece save()e restore(), para salvar e restaurar todos os atributos do contexto do canvas.

Tamanho do elemento da tela versus tamanho da superfície de desenho

Na verdade, uma tela tem dois tamanhos: o tamanho do próprio elemento e o tamanho da superfície de desenho do elemento. Definir os atributos de largura e altura do elemento define esses dois tamanhos; Os atributos CSS afetam apenas o tamanho do elemento e não a superfície de desenho.

Por padrão, o tamanho do elemento de tela e o tamanho de sua superfície de desenho são 300 pixels de largura e 150 pixels de altura. Na lista mostrada no exemplo, que usa CSS para definir o tamanho do elemento da tela, o tamanho do elemento é 600 pixels de largura e 300 pixels de altura, mas o tamanho da superfície de desenho permanece inalterado no valor padrão de 300 pixels × 150 píxeis. Quando o tamanho de um elemento de tela não corresponde ao tamanho de sua superfície de desenho, o navegador dimensiona a superfície de desenho para caber no elemento (o que pode resultar em efeitos surpreendentes e indesejados).

Exemplo de configuração do tamanho do elemento e tamanho da superfície de desenho para valores diferentes:

<!DOCTYPE html>
<html>
    <head>
    <title>Canvas element size: 600 x 300,
    Canvas drawing surface size: 300 x 150</title>
    <style>
        body {
            background: #dddddd;
        }
        #canvas {
            margin: 20px;
            padding: 20px;
            background: #ffffff;
            border: thin inset #aaaaaa;
            width: 600px;
            height: 300px;
        }
    </style>
    </head>
    <body>
        <canvas id="canvas">
        Canvas not supported
        </canvas>
    </body>
</html>

Canvas versus Scalable Vector Graphics (SVG)

SVG é um padrão anterior para desenhar formas em navegadores. No entanto, ao contrário do canvas, que é baseado em raster , SVG é baseado em vetor , de forma que cada forma desenhada é lembrada como um objeto em um gráfico de cena ou Document Object Model , que é subsequentemente renderizado em um bitmap. Isso significa que se os atributos de um objeto SVG forem alterados, o navegador pode renderizar novamente a cena automaticamente.

Os objetos da tela, por outro lado, são desenhados no modo imediato . No exemplo da tela acima, uma vez que o retângulo é desenhado, o modelo a partir do qual ele foi desenhado é esquecido pelo sistema. Se sua posição fosse alterada, toda a cena precisaria ser redesenhada, incluindo quaisquer objetos que pudessem estar cobertos pelo retângulo. Mas no caso SVG equivalente, pode-se simplesmente alterar os atributos de posição do retângulo e o navegador determina como repintá-lo. Existem bibliotecas JavaScript adicionais que adicionam recursos de gráfico de cena ao elemento de tela. Também é possível pintar uma tela em camadas e, em seguida, recriar camadas específicas.

As imagens SVG são representadas em XML e cenas complexas podem ser criadas e mantidas com ferramentas de edição XML.

O gráfico de cena SVG permite que os manipuladores de eventos sejam associados a objetos, portanto, um retângulo pode responder a um onClickevento. Para obter a mesma funcionalidade com a tela, deve-se combinar manualmente as coordenadas do clique do mouse com as coordenadas do retângulo desenhado para determinar se ele foi clicado.

Conceitualmente, o canvas é uma API de nível inferior sobre a qual um mecanismo, com suporte, por exemplo, SVG, pode ser construído. Existem bibliotecas JavaScript que fornecem implementações SVG parciais usando canvas para navegadores que não fornecem SVG, mas suportam canvas, como os navegadores no Android 2.x. No entanto, normalmente esse não é o caso - são padrões independentes. A situação é complicada porque existem bibliotecas de gráficos de cena para canvas e o SVG tem alguma funcionalidade de manipulação de bitmap.

Reações

No momento de sua introdução, o elemento canvas foi recebido com reações diversas da comunidade de padrões da web. Houve argumentos contra a decisão da Apple de criar um novo elemento proprietário em vez de suportar o padrão SVG . Existem outras preocupações sobre a sintaxe, como a ausência de um namespace .

Propriedade intelectual sobre tela

Em 14 de março de 2007, o desenvolvedor do WebKit Dave Hyatt encaminhou um e-mail do Conselheiro de Patentes Sênior da Apple, Helene Plotka Workman, que afirmava que a Apple reservava todos os direitos de propriedade intelectual relativos ao WHATWG Web Applications 1.0 Working Draft, datado de 24 de março de 2005, Seção 10.1, intitulado “Gráficos: a tela de bitmap”, mas deixou a porta aberta para o licenciamento das patentes caso a especificação fosse transferida para um órgão de padronização com uma política formal de patentes . Isso causou uma discussão considerável entre os desenvolvedores da web e levantou questões sobre a falta de uma política de patentes do WHATWG em comparação com o favorecimento explícito do World Wide Web Consortium (W3C) de licenças livres de royalties. Mais tarde, a Apple revelou as patentes sob os termos de licenciamento de patentes livres de royalties do W3C. A divulgação significa que a Apple é obrigada a fornecer licenciamento livre de royalties para a patente sempre que o elemento Canvas se tornar parte de uma recomendação futura do W3C criada pelo grupo de trabalho HTML.

Preocupações com a privacidade

A impressão digital da tela é uma das várias técnicas de impressão digital do navegador para rastrear usuários on-line que permitem que os sites identifiquem e rastreiem os visitantes usando o elemento canvas HTML5 . A técnica recebeu ampla cobertura da mídia em 2014, depois que pesquisadores da Princeton University e da KU Leuven University a descreveram em seu artigo The Web never esquends . As preocupações com a privacidade relacionadas à impressão digital da tela giram em torno do fato de que mesmo a exclusão de cookies e a limpeza do cache não serão suficientes para que os usuários evitem o rastreamento online.

Suporte de navegador

O elemento é compatível com as versões atuais do Mozilla Firefox , Google Chrome , Internet Explorer , Safari , Konqueror , Opera e Microsoft Edge .

Veja também

Referências

links externos