Modifier HTML5 Canvas – С# Exemples

Qu’est-ce que HTML Canvas ?

L’élément HTML Canvas est un élément HTML5 dans un document HTML qui est ajouté à l’aide de la balise <canvas>. L’élément <canvas> est un conteneur pour les graphiques, et vous devez utiliser JavaScript pour dessiner les graphiques – créer et manipuler dynamiquement les graphiques. HTML5 Canvas fournit un contexte de dessin en 2D qui peut être utilisé pour créer et modifier des éléments graphiques tels que des lignes, des chemins, des formes, des images et du texte. L’élément <canvas> fait partie de HTML5 et fournit un rendu dynamique de formes 2D et de bitmaps. Il s’agit d’un modèle procédural de bas niveau qui met à jour une image bitmap. HTML5 Canvas, qui est utilisé pour le rendu de graphiques, de jeux, d’art ou d’autres images visuelles à la volée, figure dans la liste des formats intégrés de la bibliothèque Aspose.HTML for .NET.

L’élément <canvas> doit avoir :

• afin que JavaScript puisse s’y référer.
• les attributs width et height permettent de définir la taille de la toile.

L’élément HTML Canvas possède également d’autres attributs que vous pouvez définir pour configurer son comportement et son apparence. Par exemple, si vous souhaitez ajouter une bordure, utilisez l’attribut style. L’élément <canvas> prend également en charge les Attributs globaux et en HTML.

HTML5 Canvas – Comment éditer en C#

Pour intégrer un élément Canvas dans un document HTML, vous n’avez besoin d’aucune manipulation particulière, il vous suffit de rendre le document comme vous le faites habituellement. L’extrait de code suivant montre comment travailler avec un document qui contient un élément HTML5 Canvas :

// How to edit HTML5 Canvas and convert it to PDF using C#

// Prepare an output path
string outputPath = Path.Combine(OutputDir, "output.pdf");

// Prepare a document with HTML5 Canvas inside and save it to the file "document.html"
string code = @"
    <canvas id=myCanvas width='200' height='100' style='border:1px solid #d3d3d3;'></canvas>
    <script>
        var c = document.getElementById('myCanvas');
        var context = c.getContext('2d');
        context.font = '30px Arial';
        context.fillStyle = 'red';
        context.fillText('Hello, World', 40, 50);
    </script>";

System.IO.File.WriteAllText("document.html", code);

// Initialize an HTML document from the html file
using (HTMLDocument document = new HTMLDocument("document.html"))
{
    // Convert HTML to PDF
    Converter.ConvertHTML(document, new PdfSaveOptions(), outputPath);
}

Dans l’exemple, nous créons un document HTML à partir de zéro. La variable code contient un contenu HTML qui génère un document avec un élément <canvas> intégré, et utilise JavaScript pour dessiner “Hello, World” sur le canevas. Décomposons le code C# étape par étape :

1. Préparez un code HTML avec HTML5 Canvas à l’intérieur et utilisez la méthode System.IO.File.WriteAllText() pour écrire le code HTML dans un fichier nommé “document.html”.
2. Initialiser un document HTML à partir du fichier en utilisant la classe HTMLDocument.
3. Appelez la méthode ConvertHTML(document, options, outputPath) pour convertir HTML en PDF avec les options d’enregistrement par défaut.

Canvas Rendering Context 2D

Outre le traitement de HTML5 Canvas en tant que partie d’un document HTML, vous pouvez travailler avec canvas directement dans votre code C#. Aspose.HTML for .NET fournit l’interface ICanvasRenderingContext2D pour ces opérations, qui est entièrement basée sur la standard officielle et utilisée pour dessiner des graphiques 2D sur un élément canvas en HTML. Elle fournit un ensemble de méthodes et de propriétés qui permettent aux développeurs de créer et de manipuler des graphiques, tels que des lignes, des formes, du texte et des images, dans le canevas.

Principales caractéristiques de CanvasRenderingContext2D

L’élément <canvas>, combiné au contexte de rendu 2D, permet aux développeurs de créer des visuels dynamiques et interactifs directement dans une page web. Voici quelques aspects clés de CanvasRenderingContext2D :

1. Avec des méthodes comme FillRect() et StrokeRect(), vous pouvez dessiner des formes sans effort.
2. CanvasRenderingContext2D facilite le rendu du texte sur le canevas à l’aide de méthodes telles que FillText() et StrokeText(), ce qui permet un affichage dynamique du texte avec différents styles et polices.
3. Vous pouvez personnaliser l’apparence des éléments dessinés en définissant des propriétés telles que FillStyle et StrokeStyle, ce qui permet d’utiliser des dégradés, des motifs et des couleurs unies.
4. Vous pouvez appliquer des transformations telles que la translation, la rotation et la mise à l’échelle, qui peuvent manipuler dynamiquement l’espace de la toile, facilitant ainsi les arrangements graphiques complexes.
5. CanvasRenderingContext2D permet de dessiner et de manipuler des images sur le canevas grâce à des méthodes telles que DrawImage(), ce qui accroît les possibilités d’intégration de graphiques dans l’interface utilisateur.

Rendre HTML5 Canvas 2D au PDF

L’extrait de code suivant montre comment utiliser la fonction de dessin de HTML5 Canvas pour rendre un texte personnalisé rempli à l’aide d’un pinceau dégradé.

// How to render HTML5 Canvas 2D to PDF using C#

// Create an empty HTML document
using HTMLDocument document = new HTMLDocument();

// Create a <canvas> element
HTMLCanvasElement canvas = (HTMLCanvasElement)document.CreateElement("canvas");

// with a specified size
canvas.Width = 500;
canvas.Height = 150;

// and append it to the document body
document.Body.AppendChild(canvas);

// Get the canvas rendering context to draw
ICanvasRenderingContext2D context = (Html.Dom.Canvas.ICanvasRenderingContext2D)canvas.GetContext("2d");

// Prepare a gradient brush
ICanvasGradient gradient = context.CreateLinearGradient(0, 0, canvas.Width, 0);
gradient.AddColorStop(0, "magenta");
gradient.AddColorStop(0.4, "blue");
gradient.AddColorStop(0.9, "red");

// Assign the brush to the content
context.FillStyle = gradient;
context.StrokeStyle = gradient;

// Write the text
context.FillText("Hello, World!", 10, 90, 500);

// Fill the rectangle
context.FillRect(0, 95, 500, 100);

// Prepare an output path
string outputPath = Path.Combine(OutputDir, "canvas.pdf");

// Create the PDF output device
using (PdfDevice device = new PdfDevice(outputPath))
{
    // Render HTML5 Canvas to PDF
    document.RenderTo(device);
}

Dans l’exemple ci-dessus, un document HTML a été rendu au format PDF à l’aide de la méthode RenderTo(device). Mais vous pouvez choisir un autre périphérique de rendu et convertir le document HTML dans un autre format dont vous avez besoin. Le rendu du contenu du canevas dans d’autres formats, tels que des images ou des PDF, peut contribuer à garantir un affichage cohérent et fiable sur différents navigateurs, faciliter l’impression ou le partage de documents visuellement cohérents par les utilisateurs et s’avérer utile à des fins d’archivage. Pour certaines applications, le rendu du contenu canvas dans un format statique peut améliorer la sécurité en empêchant les utilisateurs finaux de manipuler ou d’altérer les visuels dynamiques.

Ainsi, le rendu du contenu HTML5 canvas dans d’autres formats apporte de la flexibilité, améliore la compatibilité et ouvre de nombreuses possibilités pour le partage, l’archivage et l’intégration de graphiques dynamiques dans différents contextes. Le choix du format dépend des besoins et des objectifs spécifiques de l’application web.

Pour en savoir plus sur le processus de rendu, veuillez lire l’article Dispositif de rendu – Rendering Device.

Les options de rendu vous donnent un contrôle supplémentaire sur le processus de rendu. Pour en savoir plus, lisez l’article Options de rendu.

Pour en savoir plus sur l’utilisation de HTML5 Canvas, vous pouvez lire le très populaire Tutoriel HTML Canvas.