•  21-09-2019
  •  | 
  •  

Frage

Ich bin ein wenig verwirrt, was HTML5-Canvas ist. Ich habe gesagt, es ist JavaScript, aber es scheint ein viel größeres Geschäft zu sein?

  1. Was macht es anders als Javascript?

  2. Warum ist es so erstaunlich?

  3. Tut es andere Dinge als JavaScript?

War es hilfreich?

Lösung

Ich schlage vor, Sie diesen Artikel lesen HTML5 Canvas - die Grundlagen

Aber kurz. Es ersetzt nicht Javascript.

  

HTML 5 Leinwand gibt Ihnen eine einfache und   leistungsstarke Möglichkeit, Grafiken zu zeichnen mit   JavaScript. Für jedes Canvas-Element   Sie können einen „Kontext“ verwenden (man denke etwa ein   Seite in einem Zeichenblock), in denen Sie   Ausgabe von JavaScript-Befehle können ziehen   alles was du willst. Browser können   implementieren mehrere Leinwand Kontexte und   die verschiedenen APIs bieten die Zeichnung   Funktionalität.

Andere Tipps

Die canvas ist im Grunde ein img Element, dass Sie sich mit Javascript ziehen können.

Das Canvas-Element im Wesentlichen eine Zeichnung, Leinwand, die auf programm gemalt werden können; eine Art von skript Bitmap Zeichenwerkzeug für das Web.

ich die „amazing“ daran nehme an, abgesehen von der Tatsache, dass wir jetzt alle Web-basierte erstellen MS Paint-Klone mit Leichtigkeit, ist, dass Sie haben eine viel reichere, vollständig Freiformfläche für die Erstellung komplexer Grafiken Client -SIDE und on-the-fly. Sie können ziemlich Grafiken zeichnen, oder Dinge tun, mit Fotos. Angeblich soll, können Sie auch Animation machen!

Mozilla Developer hat Zentrum eine vernünftige Anleitung , wenn Sie wollen, um es auszuprobieren.

Zu allererst ist Canvas NICHT JavaScript! Diese 2 sind völlig verschiedene Dinge.

Canvas ist ein HTML5-Element, das für die Rendering-Grafiken verwendet werden kann, Animationen, Grafiken, Fotomontagen oder andere visuelle Objekte on the fly von JavaScript verwenden. Häufiger ist für die Erstellung von Web-Spiel und Online-Präsentation.

Leinwand verwendet
  • Leinwand - Ein Rechteck Bereich wie weißes Papier
  • Kontext - Gibt das Objekt zurück, indem Sie, was wir viele Funktionen verwendet wird, rufen Sie können die Grafiken und Animationen auf einer Leinwand zu zeichnen (wie, wie Bleistiften auf Papier verwendet werden)

Das folgende Beispiel zeigt, das eine Linie auf der Leinwand zieht: 

<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>
       

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top