Comentário: O HTML5 apresenta um novo rótulo, e a área representada por esse rótulo é como uma tela. Todos os seus desenhos gráficos devem ser apresentados nesta tela no final. Com esta tag, a expressividade gráfica do navegador foi bastante aprimorada. Flash e Silverlight se sentem ameaçados?
1. <Canvas> TagO HTML5 apresenta uma nova tag <Canvas>, a área representada por esta tag é como uma tela e todos os seus desenhos gráficos devem ser apresentados nessa tela no final. Com esta tag, a expressividade gráfica do navegador foi bastante aprimorada. Flash e Silverlight se sentem ameaçados?
Link de notícias: o navegador do Google afirma o Chrome 7 acelerará 60 vezes mais rápido
O uso da tag <Canvas> é muito simples, como segue:
<Canvas>
Seu navegador não suporta a tag de tela
</canvas>
Não há grande diferença entre a tag <locas> e a tag HTML comum. Você pode definir sua largura e altura e definir sua cor de fundo, estilo de borda etc. através de CSS.
Você pode encontrar mais sobre a tag <lVAs> aqui.
O conteúdo no meio da tag é o conteúdo de reposição. Se o navegador do usuário não suportar a tag <Canvas>, o conteúdo será exibido; Se o navegador do usuário suportar a tag <Canvas>, o conteúdo será ignorado.
O código acima <VAS> exibe o seguinte efeito:
Seu navegador não suporta a tag de tela
Se você estiver usando o navegador do IE, poderá ver apenas um prompt; Se você estiver usando o navegador do Google Chrome ou Firefox, poderá ver uma área quadrada vermelha.
2. Contexto de renderização
Na verdade, não podemos fazer nada com a tag <liavas>. Os alunos que jogaram programação do Windows sabem que, ao desenhar no Windows, você deve primeiro obter um contexto de dispositivo DC e, ao desenhar na tag <liavas>, você também precisa obter um contexto de renderização. Nossos gráficos não são desenhados diretamente na tela, mas no contexto (contexto) primeiro e depois atualizam na tela.
Off Topic: Por que você precisa montar um conceito com um contexto tão complexo? Por causa do objeto de contexto, podemos fazer com que vários dispositivos gráficos pareçam iguais aos nossos olhos. Precisamos apenas nos concentrar no desenho e deixar o sistema operacional e o navegador se preocuparem com outras tarefas. Para ser franco, transforme todos os tipos de concreto em abstrações unificadas, reduzindo assim nosso fardo.
Obter o contexto é muito simples, você só precisa de duas linhas de código da seguinte forma:
var canvas = document.getElementById ('tutorial');
var ctx = Canvas.getContext ('2D');
Primeiro, obtenha o objeto Canvas e, em seguida, chame o método getContext do objeto Canvas. Este método só pode passar no parâmetro 2D atualmente. Em um futuro próximo, pode suportar o parâmetro 3D. Você deve entender o que isso significa, vamos esperar por isso.
O método getContext retorna um objeto CanvasRanderingContext2D, ou seja, o objeto de contexto de renderização. Você pode encontrar mais sobre isso aqui, todos alguns métodos de desenho.
3. Suporte ao navegador
Além de exibir conteúdo alternativo nesses navegadores não suportados, também podemos verificar se o navegador suporta tela através de scripts. O método é muito simples. Apenas julgue se a função GetContext existe. O código é o seguinte:
var canvas = document.getElementById ('tutorial');
if (Canvas.getContext) {
alerta ("tag" Suporte <lvas> ");
} outro {
alerta ("não suportado <senvas> tag");
}
4. Um pequeno exemplo
Abaixo, um exemplo de movimentação de linhas para cima e para baixo será demonstrado usando a função de desenho do HTML5. O código específico será fornecido no conteúdo subsequente.
Seu navegador não suporta a tag <liavas>, use o navegador Chrome ou Firefox