Générer automatiquement du JavaScript-Canvas avec Inkscape

Sur un smartphone visualisez cette page en utilisant l'orientation "paysage" !

Dans sa dernière version on peut utiliser le logiciel de dessin Inkscape pour générer du HTML-Canvas.

Exemple

J'ai ouvert le logiciel Inkscape puis j'ai redimensionné le nouveau document vierge : 600 par 600 pixels.
J'ai ensuite dessiné le drapeau suisse : un rectangle rempli de rouge et un croix blanche. image inkscape

Mais au moment d'enregistrer le document je n'ai pas choisi le type par défaut (SVG Inkscape) mais j'ai fait dérouler la liste et j'ai choisi le type HTML5 Canvas pour générer (non pas du SVG) mais du HTML & Javascript-canvas dans une nouvelle page web.
J'ai enregistré le fichier sous le nom : suisse.html.

Le rendu de la page web générée par Inkscape

Le fichier "suisse.html"

Examinons maintenant le code HTML-CANVAS généré par Inkscape !

Le code de la page

<!DOCTYPE html> <html><head> <title>Inkscape Output</title> </head> <body> <canvas id='canvas' width='600' height='600'></canvas> <script> var ctx = document.getElementById("canvas").getContext("2d"); // #layer1 ctx.save(); ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, -452.362160); // #rect3338 ctx.beginPath(); ctx.globalAlpha = 1.0; ctx.lineJoin = 'miter'; ctx.lineWidth = 6.000000; ctx.lineCap = 'round'; ctx.miterLimit = 4; ctx.fillStyle = 'rgb(255, 0, 0)'; ctx.rect(60.000000, 492.362150, 480.000000, 480.000000); ctx.fill(); // #rect3340 ctx.beginPath(); ctx.globalAlpha = 1.0; ctx.lineJoin = 'miter'; ctx.lineWidth = 6.000000; ctx.lineCap = 'round'; ctx.miterLimit = 4; ctx.fillStyle = 'rgb(255, 255, 255)'; ctx.rect(240.000000, 572.535340, 118.008660, 322.424220); ctx.fill(); // #rect3340-1 ctx.save(); ctx.beginPath(); ctx.transform(0.000000, 1.000000, -1.000000, 0.000000, 0.000000, 0.000000); ctx.globalAlpha = 1.0; ctx.lineJoin = 'miter'; ctx.lineWidth = 6.000000; ctx.lineCap = 'round'; ctx.miterLimit = 4; ctx.fillStyle = 'rgb(255, 255, 255)'; ctx.rect(675.175960, -458.484860, 118.008660, 319.653660); ctx.fill(); ctx.restore(); ctx.restore(); </script> </body></html>

Commentaires

Remarquez l'instruction HTML :

<canvas id='canvas' width='600' height='600'></canvas>

La page générée n'est pas adaptive puisque la largeur du canevas est exprimée en pixels.

Autre inconvénient du code généré par un robot : il est très verbeux.
Un bon développeur aurait écrit tout simplement le code suivant (extraits):

... <body> <canvas width ="600" height="600"></canvas> ... <script> var canvas = document.querySelector('canvas'); var contexte = canvas.getContext('2d'); contexte.fillStyle = 'red'; contexte.fillRect(100,100,200,200) ; // effacement d'une partie du rouge contexte.clearRect(130,180,140,40); contexte.clearRect(180,130,40,140);

Si vous voulez en savoir plus sur le logiciel de dessin Inkscape il y a un tuto dans mon site : Le logiciel Inkscape
Retour menu