JavaScript Utiliser l'API DOM (avec texte graphique: Canvas, SVG ou fichier image)


Exemple

Utiliser des éléments de toile

HTML fournit l'élément canvas pour créer des images basées sur des rasters.

Créez d'abord un canevas pour contenir les informations sur les pixels de l'image.

var canvas = document.createElement('canvas');
canvas.width = 500;
canvas.height = 250;

Ensuite, sélectionnez un contexte pour la toile, dans ce cas en deux dimensions:

var ctx = canvas.getContext('2d');

Ensuite, définissez les propriétés liées au texte:

ctx.font = '30px Cursive';
ctx.fillText("Hello world!", 50, 50);

Ensuite, insérez l'élément canvas dans la page pour prendre effet:

document.body.appendChild(canvas);

Utiliser SVG

SVG est destiné à la création de graphiques vectoriels évolutifs et peut être utilisé dans HTML.

Créez d'abord un conteneur d'éléments SVG avec les dimensions suivantes:

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.width = 500;
svg.height = 50;

Créez ensuite un élément de text avec les caractéristiques de positionnement et de police souhaitées:

var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '0');
text.setAttribute('y', '50');
text.style.fontFamily = 'Times New Roman';
text.style.fontSize = '50';

Ajoutez ensuite le texte à afficher dans l'élément de text :

text.textContent = 'Hello world!';

Ajoutez enfin l'élément text à notre conteneur svg et ajoutez l'élément de conteneur svg au document HTML:

svg.appendChild(text);
document.body.appendChild(svg);

Fichier d'image

Si vous avez déjà un fichier image contenant le texte souhaité et que vous l'avez placé sur un serveur, vous pouvez ajouter l'URL de l'image, puis ajouter l'image au document comme suit:

var img = new Image();
img.src = 'https://i.ytimg.com/vi/zecueq-mo4M/maxresdefault.jpg';
document.body.appendChild(img);