•  21-09-2019
  •  | 
  •  

Pergunta

Eu estou um pouco confusa para que o HTML5 canvas é.Eu tenho dito que é o JavaScript, mas parece ser um negócio muito maior?

  1. O que o torna diferente de javascript?

  2. Por que é tão surpreendente?

  3. Ele faz outras coisas de JavaScript?

Foi útil?

Solução

Eu sugiro que você leia este artigo Tela HTML5 - o básico

Mas em suma. Ele não substitui o JavaScript.

HTML 5 tela fornece uma maneira fácil e poderosa de desenhar gráficos usando JavaScript. Para cada elemento de tela, você pode usar um "contexto" (pense em uma página em uma almofada de desenho), na qual você pode emitir comandos JavaScript para desenhar o que quiser. Os navegadores podem implementar vários contextos de tela e as diferentes APIs fornecem a funcionalidade de desenho.

Outras dicas

o canvas é basicamente um img Elemento que você pode usar usando JavaScript.

o Elemento de tela é essencialmente uma tela de desenho que pode ser pintada programaticamente; Uma espécie de ferramenta de desenho de bitmap scriptável para a Web.

Suponho que a coisa "incrível" sobre isso, além do fato de que agora todos podemos criar clones de pintura MS com facilidade, baseados na Web, é que você tem uma área de formato muito mais rica e completamente livre para criar gráficos complexos do lado do cliente e no vôo. Você pode desenhar gráficos bonitos ou fazer coisas com fotos. Alegadamente, você também pode fazer animação!

O Mozilla's Developer Center tem um tutorial razoável Se você quiser experimentar.

Primeiro de tudo, a tela não é JavaScript! Esses 2 são coisas totalmente diferentes.

O Canvas é um elemento HTML5 que pode ser usado para renderizar gráficos, animação, gráficos, composições de fotos ou quaisquer outros objetos visuais em tempo real usando JavaScript. Mais frequentemente, o Canvas usou para criar jogos na web e apresentação on -line.

  • Lona - Um retângulo de área como o branco do papel
  • Contexto - Retorna o objeto usando o que podemos chamar de muitas funções que é usada para desenhar os gráficos e animações em uma tela (como lápis são utilizados em papel)

Veja o exemplo a seguir, que desenha uma linha na tela:

<html>
      <body>
       <canvas id="c" width="200" height="200" style="border:1px solid"></canvas>
        <script>
          var canvas = document.getElementById("c");//get the canvas in javascript
          var context = canvas.getContext("2d");//getcontext on canvas
          context.beginPath();//start the path.we are going to draw the line
          context.moveTo(20,20);//starting point of Line
          context.lineTo(40,20);//ending point of Line
          context.stroke(); //ink used for drawing Line (Default: Black)
        </script>
      </body>
    </html>

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top