In questo articolo impareremo un tag HTML5 utilizzato per creare grafica grafica che è il tag Canvas .

Ad esempio, se vuoi disegnare un diagramma geometrico, dobbiamo utilizzare un file immagine. Ma con Canvas, puoi disegnare completamente te stesso.

1. Che cos'è HTML5 Canvas?

Canvas è un tag HTML5 simile ad altri tag HTML, ma la differenza più ovvia è che il contenuto di Canvas è costruito da Javascript. Per utilizzare Canvas, devi posizionare il <canvas></canvas> nella posizione che desideri visualizzare, quindi utilizzare le API fornite da HTML5 per manipolare gli oggetti all'interno del Canvas (linea, cerchio, ..).

Quando si utilizza Canvas è necessario comprendere la differenza tra gli elementi del Canvas e il suo contenuto. L'elemento Canvas è solo un normale tag HTML, ma il suo contenuto è una raccolta di oggetti che compongono una grafica.

Quando viene visualizzata nel browser, la tela verrà visualizzata come un'immagine png .

 <canvas id="myCanvas" width="578" height="200"></canvas> <script> // Lấy thẻ HTML Canvas var canvas = document.getElementById('myCanvas'); // Vẽ ở mô hình 2D var context = canvas.getContext('2d'); // Thiết lập font chữ và màu context.font = '40pt Calibri'; context.fillStyle = 'blue'; // vẽ một đoạn text tại vị trí 150px 100px context.fillText('Hello World!', 150, 100); </script>

Corri, vedrai un messaggio " Ciao mondo! ", prova a oscurarlo, ok? Assolutamente no perché è un Oggetto visualizzato come immagine, quindi puoi salvarlo solo come file png , non più come testo.

2. Conclusione

Poiché questo è il primo articolo a iniziare una serie di informazioni sui tag Canvas in HTML5, non approfondisco come gestirlo, ma introduco solo il concetto di cosa sia Canvas e alcune note quando si utilizza Canvas. Nei prossimi articoli impareremo come utilizzare l'API Canvas HTML5 per manipolare oggetti in Canvas.