Tutorial detalhado de elemento da tela HTML5 1

<Canvas> é um novo elemento no HTML5, que pode ser usado pelo JavaScript para desenhar gráficos. Primeiro, o <Canvas> foi introduzido no painel Mac OS X da Apple, que foi aplicado ao Safari e, em seguida, com base no navegador Gecko1.8, que também suporta esse novo elemento, como o navegador Firefox. Hoje, o elemento <Canvas> faz parte da especificação padrão HTML5.

Explicaremos o que <lvas> pode fazer, através deste tutorial, e ele pode ser usado como ponto de partida para o seu aplicativo <VRAS>. Aprender <Canvas> elementos não é difícil. Você só precisa ter o conhecimento básico de HTML e JavaScript, bem como o navegador Firefox, a versão mais recente do Safari ou o Opera9+, para que você possa ver todos os efeitos de exemplo.

Agora, vamos começar com como definir o elemento <Canvas>.

<Canvas ID = Largura do tutorial = 150 altura = 150> </canvas>

O elemento <Canvas> possui apenas dois atributos, largura e altura, que são opcionais e podem ser controlados usando DOM ou CSS. Se a largura e a altura não estiverem definidas, a largura padrão é de 300 pixels e 150 pixels de altura. Embora o tamanho de <liavas> possa ser controlado e ajustado através do CSS, a imagem renderizada será dimensionada para se adaptar ao layout. Depois que os resultados da renderização parecem deformados, você não precisa confiar no CSS. Você pode especificar os valores de largura e altura exibidos em <Canvas>. Assim como as tags HTML padrão, os atributos de ID também podem ser definidos, o que pode tornar o aplicativo de script mais conveniente. O elemento <Canvas> pode especificar seu estilo (margens, bordas, fundos, etc.) como uma imagem normal. No entanto, esses estilos não têm nenhum efeito na imagem real gerada pela tela.

Como esse elemento é relativamente novo, nem todos os navegadores o suportam, por isso precisamos fornecer informações alternativas para aqueles que não podem navegar normalmente. Pode usar texto ou imagens:

 <canvasid = sosseguchwidth = 150Height = 150>
 O seu navegador não suporta o elemento <Canvas>.
 </canvas>
 <canvasid = clockwidth = 150Height = 150>
 <imgsrc = imagens.pngwidth = 150Height = 150alt = Substitua a imagem/
 </canvas>

No Apple Safari, a implementação do <lVAs> é muito semelhante a <Mig> e não possui etiqueta final. No entanto, para que <liavas> seja amplamente aplicável no mundo da web, o conteúdo alternativo precisa ser fornecido com um local para ficar, por isso é necessário encerrar a tag (</lvas>) na implementação de Mozilla. <Canvas ID = Foo ...> </Canvas> é totalmente compatível com Safari e Mozilla - o Safari simplesmente ignora a etiqueta final. 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 tela de desenho de tamanho fixo com um ou mais contextos de renderização que podem controlar o que exibir. Nós nos concentramos na renderização 2D, que também é a única opção no momento. Podemos adicionar a renderização 3D com base no OpenGL ES no futuro.

 varCanvas = document.getElementById ('tutorial');
 Varctx = Canvas.getContext ('2D');

Vamos explicar o código acima. A inicialização de <lVAs> está em branco. Para desenhar um script, você precisa renderizar o contexto primeiro. Pode ser obtido através do método getContext do objeto de elemento da tela. Ao mesmo tempo, algumas funções que precisam ser chamadas para desenho também são obtidas. getContext () aceita um valor que descreva seu tipo como um argumento. A primeira linha acima obtém o nó DOM do objeto de tela através do método getElementById. Em seguida, use seu método getContext para obter seu contexto de operação de desenho. Além disso, também podemos usar scripts para determinar o suporte do navegador para <Canvas>, ou seja, para determinar se o GetContext existe.

 varCanvas = document.getElementById ('tutorial');
 if (Canvas.getContext) {
 Varctx = Canvas.getContext ('2D');
 // DrawingCodehere
 }outro{
 // Canvas-UnsupportDCodeHehehere
 }

Começamos com o modelo mais simples abaixo, você pode copiá -los para o backup local.

 <html>
 <head>
 <title> Canvastutorial </ititle>
 <scripttype = text/javascript>
 functionDraw () {
 varCanvas = document.getElementById ('tutorial');
 if (Canvas.getContext) {
 Varctx = Canvas.getContext ('2D');
 }
 }
 </script>
 <styleType = text/css>
 Canvas {Border: 1pxSolidBlack;}
 </style>
 </head>
 <bodyonload = draw ();>
 <canvasid = tutorialwidth = 150Height = 150> </canvas>
 </body>
 </html>

Cuidados com cuidado, você encontrará uma função chamada Draw, que será executada uma vez depois que a página for carregada (definindo a propriedade Onload da etiqueta do corpo) e, é claro, ela também pode ser chamada nas funções de manuseio do setTimeout, setInterval ou outras funções de manuseio de eventos.

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>
 <scriptType = Application/X-Javascript>
 functionDraw () {
 varCanvas = document.getElementById (Canvas);
 if (Canvas.getContext) {
 Varctx = 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>
 </head>
 <bodyonload = draw ();>
 <canvasid = canvasWidth = 150Height = 150> </Canvas>
 </body>
 </html>

Você pode copiar o código acima para o arquivo HTML para executar, renderizações: