•  21-09-2019
  •  | 
  •  

Domanda

Sono un po 'confuso per ciò che HTML5 tela è. Mi è stato detto che è Javascript, ma sembra essere un affare molto più grande?

  1. Che cosa lo rende diverso da javascript?

  2. Perché è così sorprendente?

  3. Lo fa altre cose di JavaScript?

È stato utile?

Soluzione

vi consiglio di leggere questo articolo HTML5 Canvas - le basi

Ma insomma. Non sostituisce javascript.

  

HTML 5 tela ti dà un facile e   potente strumento per disegnare elementi grafici utilizzando   JavaScript. Per ciascun elemento tela   è possibile utilizzare un "contesto" (pensare a un   pagina in un foglio da disegno), in cui si   può emettere comandi JavaScript per disegnare   quello che vuoi. I browser possono   implementare molteplici contesti tela e   le diverse API forniscono il disegno   funzionalità.

Altri suggerimenti

Il canvas è fondamentalmente un elemento img che è possibile disegnare su utilizzando JavaScript.

Il tela elemento è essenzialmente un'area di disegno che può essere verniciato sulla programmazione; una sorta di strumento di disegno bitmap script per il web.

Credo che la cosa "sorprendente" su di esso, a parte il fatto che ora possiamo tutti creare web-based MS Paint cloni con facilità, è che si dispone di una molto più ricca, completamente un'area a forma libera per la creazione di complesse cliente grafica -side e on-the-fly. È possibile disegnare belle grafici, o fare cose con le foto. Presumibilmente, si può anche fare animazione!

Developer Center di Mozilla ha un tutorial ragionevole se si vuole provare.

Prima di tutto, tela non è Javascript! Questi 2 sono cose totalmente diverse.

Canvas è un elemento HTML5 che può essere utilizzato per la grafica di rendering, animazione, grafici, composizioni fotografiche o altri oggetti visivi al volo utilizzando JavaScript. Più spesso, tela è utilizzato per la costruzione di gioco web e la presentazione on-line.

  • Canvas - Una zona rettangolare come carta bianca
  • Contesto - Restituisce l'oggetto utilizzando quello che possiamo chiamare molte funzioni su cui viene utilizzato per disegnare la grafica e le animazioni su una tela (come come matite sono utilizzati su carta)

Si veda il seguente esempio, che disegna una linea sulla 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>
       

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top