¿Cuál es el canvas de HTML5?

StackOverflow https://stackoverflow.com/questions/2483780

  •  21-09-2019
  •  | 
  •  

Pregunta

Estoy un poco confundido sobre lo que es canvas de HTML5. Me han dicho que es JavaScript, pero parece ser mucho más importante?

  1. Lo que lo hace diferente de JavaScript?

  2. ¿Por qué es tan sorprendente?

  3. ¿Hace otras cosas de JavaScript?

¿Fue útil?

Solución

Le sugiero que lea este artículo HTML5 Canvas - los fundamentos

Pero en fin. No reemplaza Javascript.

  

HTML 5 lona le da una forma fácil y   poderosa manera de dibujar gráficos usando   JavaScript. Para cada elemento canvas   se puede utilizar un "contexto" (pensar en una   página en un cuaderno de dibujo), en la que se   puede emitir comandos JavaScript para dibujar   todo lo que quieras. Los navegadores pueden   implementar múltiples contextos y lona   los diferentes API proporcionan el dibujo   funcionalidad.

Otros consejos

El canvas es básicamente un elemento img que se puede dibujar sobre el uso de JavaScript.

El lienzo elemento es esencialmente un lienzo de dibujo que puede ser pintado en programación; una especie de herramienta de dibujo de mapa de bits de secuencias de comandos para la web.

Supongo que lo "increíble" al respecto, aparte del hecho de que podemos ahora todos creamos MS Paint clones con facilidad, basado en la web es que usted tiene una, completamente área de forma libre mucho más rico para la creación de complejos cliente gráficos -SIDE y sobre la marcha. Puede dibujar gráficos bonitos, o hacer cosas con las fotos. Al parecer, también se puede hacer la animación!

Centro de desarrolladores de Mozilla tiene un tutorial razonable si quieres probarlo.

En primer lugar, se sitúa fuera JavaScript! Estos 2 son cosas totalmente diferentes.

Canvas es un elemento HTML5 que puede ser utilizado para procesamiento de gráficos, animación, gráficos, composiciones de fotos u otros objetos visuales sobre la marcha mediante el uso de JavaScript. Más a menudo, lona ha utilizado para la construcción de juego web y la presentación en línea.

  • Canvas - Un área rectangular como papel blanco
  • Contexto - Devuelve el objeto mediante el uso de lo que podemos llamar muchas funciones en el que se utiliza para dibujar los gráficos y animaciones en un lienzo (como la forma de lápices se utilizan en el papel)

Vea el siguiente ejemplo que dibuja una línea en el lienzo: 

<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 bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top