<Canvas> é um novo elemento HTML que pode ser usado pela linguagem de script (geralmente JavaScript) para desenhar gráficos. Por exemplo, ele pode ser usado para desenhar figuras, sintetizar imagens ou fazer animações simples (e não tão simples). A imagem à direita mostra alguns exemplos de aplicativos de <Canvas> e veremos sua implementação neste tutorial.
<Canvas> foi introduzido pela primeira vez no painel Mac OS X da Apple e depois aplicado ao Safari. Os navegadores baseados em gecko1.8, como o Firefox 1.5, também suportam esse novo elemento. O elemento <VAS> faz parte dos aplicativos Web Web 1.0, que é conhecido por todos, a especificação padrão HTML 5.
Neste tutorial, tentarei dizer como usar o elemento <Canvas> em sua própria página da web. Os exemplos fornecidos devem oferecer alguns conceitos claros, a saber, o que você pode fazer com <Canvas>. Esses exemplos também podem servir como ponto de partida para o seu aplicativo <lVAs>.
Antes de começar a usar
Usar o elemento <lVAs> não é difícil, desde que você tenha o conhecimento básico de HTML e JavaScript.
Como mencionado acima, nem todos os navegadores modernos suportam elementos <Canvas>, para que você precise do Firefox 1.5 ou posterior, ou outros navegadores baseados em Gecko, como Opera 9, ou uma versão recente do Safari para ver as ações de todos os exemplos.
<VASVAS> elemento
Vamos iniciar este tutorial olhando para o próprio elemento <Canvas>.
Vamos começar com a definição do elemento <Canvas>.
<Canvas ID = Largura do tutorial = 150 altura = 150> </canvas>
Isso se parece muito com o elemento <MG>, a única diferença é que ele não possui os atributos SRC e Alt. <Canvas> Parece -se muito com o <MG>, a única diferença é que ele não possui os atributos SRC e ALT. O elemento <Canvas> possui apenas dois atributos - largura e altura . Ambas são opcionais e também podem ser definidas usando as Propriedades DOM ou as regras CSS. Quando nenhum atributo de largura e altura for especificado, a tela terá inicialmente 300 pixels de largura e 150 pixels de altura . O elemento pode ser dimensionado arbitrariamente pelo CSS, mas durante a renderização da imagem é escalado para se ajustar ao tamanho do layout. (if your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not with css.) Although the size of the canvas can be resized through css, the rendering image will scale to adapt to the layout (if you find that the rendering results look deformed, you don't have to rely on css, you can try to explicitly specify the width and height attribute values of a tela).
O atributo de ID não é específico para o elemento <Canvas>, mas é um dos atributos HTML padrão que podem ser aplicados a (quase) todos os elementos HTML (como classe, por exemplo). É sempre uma boa ideia fornecer um ID, porque isso facilita muito identificá -lo em nosso script.
O atributo de identificação não é exclusivo de <Canvas>. Assim como a tag HTML padrão, qualquer elemento HTML pode especificar seu valor de ID. Geralmente, é uma boa idéia especificar um ID para um elemento, o que facilita a aplicação de scripts.
O elemento <Canvas> pode ser estilizado como qualquer imagem normal (margem, borda, fundo, etc.). Essas regras, no entanto, não afetam o desenho real na tela. Vamos ver como isso é feito mais tarde neste tutorial. Quando nenhuma regra de estilo for aplicada à tela, ela será totalmente transparente. O elemento <Canvas> pode ser estilizado como qualquer imagem normal (margem, borda, fundo, etc.). Essas regras, no entanto, não afetam o desenho real na tela. Vamos ver como isso é feito mais tarde neste tutorial. Quando nenhuma regra de estilo for aplicada à tela, ela será totalmente transparente. O elemento <Canvas> pode ser estilizado como qualquer imagem normal (margem, borda, fundo etc.) é como se fosse uma imagem normal. No entanto, esses estilos não têm nenhum efeito na imagem real gerada pela tela. Abaixo, veremos como aplicar estilos. Se você não especificar um estilo, a tela é completamente transparente por padrão.
Como o elemento <Canvas> ainda é relativamente novo e não é implementado em alguns navegadores (como Firefox 1.0 e Internet Explorer), precisamos de um meio de fornecer conteúdo de fallback quando um navegador não suporta o elemento.
Como o <VAS> é relativamente novo, alguns navegadores não o implementam, como o Firefox 1.0 e o Internet Explorer, precisamos fornecer conteúdo de exibição alternativo para navegadores que não suportam tela.
Com sorte, isso é muito direto: apenas fornecemos conteúdo alternativo dentro do elemento de tela. Os navegadores que não o apoiam ignoram completamente o elemento e renderizam o conteúdo de fallback, outros apenas renderizarão a tela normalmente.
Por exemplo, poderíamos fornecer uma descrição de texto do conteúdo da tela ou fornecer uma imagem estática do conteúdo renderizado dinamicamente. Isso pode parecer algo assim:
Só precisamos inserir conteúdo substituto diretamente no elemento Canvas. Os navegadores que não suportam a tela ignoram os elementos da tela e renderizam diretamente o conteúdo alternativo, enquanto os navegadores suportados renderizarão a tela normalmente. Por exemplo, podemos preencher alguns texto ou imagens em tela como conteúdo alternativo:
<Canvas ID = Largura da estoque = 150 Altura = 150> Preço atual da estoque: $ 3,15 +0,15 </canvas> <Canvas ID = Largura do relógio = 150 altura = 150> <img src = imagens/clock.png width = 150 altura = 150/> </canvas>
Na implementação do Apple Safari, <lVAs> é um elemento implementado da mesma maneira <MG> é; Não tem uma etiqueta final. No entanto, para que <lvas> tenha um uso generalizado na web, alguma instalação para conteúdo de fallback deve ser fornecida. Portanto, a implementação de Mozilla requer uma etiqueta final (</lvas>).
No Apple Safari, a implementação do <Canvas> é muito semelhante a <Mig> e não possui uma etiqueta final. No entanto, para que <liavas> seja amplamente aplicável no mundo da web, é necessário fornecer um local para conteúdo alternativo; portanto, é necessário encerrar a tag (</lvas>) na implementação de Mozilla.
Se o conteúdo de fallback não for necessário, um simples <canvas id = foo ...> </lvas> será totalmente compatível com o Safari e o Mozilla - o Safari simplesmente ignorará a etiqueta final.
Se não houver substituto, <canvas id = foo ...> </lvas> é totalmente compatível com Safari e Mozilla - o Safari simplesmente ignora a etiqueta final.
Se o conteúdo de fallback for desejado, alguns truques do CSS devem ser empregados para mascarar o conteúdo de fallback do Safari (que deve renderizar apenas a tela) e também para mascarar os truques do CSS do IE (que devem tornar o conteúdo de fallback).
Se houver conteúdo alternativo, você poderá usar alguns truques CSS para ocultar conteúdo alternativo e apenas para Safari, porque esse conteúdo alternativo precisa ser exibido no IE, mas não no Safari.
<Canvas> cria uma superfície de desenho de tamanho fixo que expõe um ou mais contextos de renderização , que são usados para criar e manipular o conteúdo mostrado. Vamos nos concentrar no contexto de renderização 2D, que é o único contexto de renderização atualmente definido. No futuro, outros contextos podem fornecer diferentes tipos de renderização; Por exemplo, é provável que um contexto 3D baseado no OpenGL ES seja adicionado.
A tela de desenho de tamanho fixo criado por <Canvas> abre um ou mais contextos de renderização , através dos quais podemos controlar o que exibir. Nós nos concentramos na renderização 2D, que também é a única opção no momento, e podemos adicionar contexto 3D com base no OpenGL ES no futuro.
O <Canvas> está inicialmente em branco e para exibir algo que um script precisa primeiro para acessar o contexto de renderização e atrair. O elemento Canvas possui um método DOM chamado getContext, usado para obter o contexto de renderização e suas funções de desenho. getContext () pega um parâmetro, o tipo de contexto.
A inicialização de <lVAs> está em branco. Para desenhar um script, ele primeiro requer seu contexto de renderização. Pode ser obtido através do método getContext do objeto de elemento da tela. Ao mesmo tempo, algumas funções são obtidas para desenho. getContext () aceita um valor que descreva seu tipo como um argumento.
var canvas = document.getElementById ('tutorial'); var ctx = canvas.getContext ('2d');Na primeira linha, recuperamos o nó do Canvas DOM usando o método getLelessById. Podemos então acessar o contexto de desenho usando o método getContext.
A primeira linha acima obtém o nó DOM do objeto de tela através do método getElementById. Em seguida, o contexto de operação de desenho é obtido por meio de seu método getContext.
O conteúdo de fallback é exibido em navegadores que não suportam <VAs>; Os scripts também podem verificar o suporte quando executarem. Isso pode ser feito facilmente testando o método getContext. Nosso trecho de código de cima se torna algo assim:
Além de exibir conteúdo alternativo em navegadores não suportados, você também pode verificar se o navegador suporta tela através de scripts. O método é muito simples, apenas julgue se o GetContext existe.
var Canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); // Código de desenho aqui} else {// Código Canvas-Unsupported aqui}Aqui está um modelo minimalista, que usaremos como ponto de partida para exemplos posteriores. Você pode baixar este arquivo para trabalhar no seu sistema.
Começaremos com o seguinte modelo de código mais simples (necessário para exemplos subsequentes) e você pode baixar o arquivo a ser usado localmente.
<html> <head> <title> tutorial de tela </ititle> <script type = text/javascript> function draw () {var canvas = document.getElementById ('tutorial'); if (canvas.getContext) {var ctx = canvas.getContext ('2D'); }} </script> <style type = text/css> tela {borda: 1px Solid Black; } </style> </head> <corpo onload = draw ();> <canvas id = width tutorial = 150 altura = 150> </canvas> </body> </html>Se você olhar para o script que verá que fiz uma função chamada Draw, que será executada assim que a página terminar o carregamento (através do atributo Onload na tag corporal). Essa função também poderia ter sido chamada de uma função Settimeout, setInterval ou qualquer outra função de manipulador de eventos, desde que a página tenha sido carregada primeiro.
Se você tiver cuidado, descobrirá que eu preparei uma função chamada Draw, que será executada uma vez após a carga da página (definindo a propriedade Onload da etiqueta do corpo) e, é claro, ela também pode ser chamada nas funções Settimeout, SetInterval ou outras funções de manuseio de eventos.
Para começar, aqui está um exemplo simples que atrai dois retângulos que se cruzam, um dos quais tem transparência alfa. Vamos explorar como isso funciona em mais detalhes em exemplos posteriores.
Para começar, vamos dar uma olhada simples - desenhe dois retângulos entrelaçados, um dos quais tem um efeito transparente alfa. Daremos a você uma visão detalhada de como funciona no exemplo a seguir.
<html> <head> <script type = Application/x-javascript> função desenho () {var Canvas = document.getElementById (Canvas); if (canvas.getContext) {var ctx = canvas.getContext (2D); ctx.fillstyle = rgb (200,0,0); ctx.FillRect (10, 10, 55, 50); ctx.fillstyle = rgba (0, 0, 200, 0,5); ctx.FillRect (30, 30, 55, 50); }} </script> </ad Head> <Body OnLoad = draw ();> <Canvas ID = Lidth = 150 Hight = 150> </canvas> </body> </html>