CanvasRenderingContext2D – C#

Qu’est-ce que CanvasRenderingContext2D ?

L’élément HTML <canvas> est une zone bitmap dans une page HTML. Aspose.HTML for .NET fournit l’interface ICanvasRenderingContext2D utilisée pour dessiner des rectangles, du texte, des images et d’autres objets sur le canevas HTML. Il fournit le contexte de rendu 2D pour la surface de dessin d’un élément <canvas>. Avec son aide, vous pouvez dessiner des formes, des lignes, des courbes, des cases, du texte et des images, utiliser des couleurs, des rotations, des transformations et d’autres manipulations de pixels.

Tout d’abord, assurez-vous que Aspose.HTML for .NET est installé dans votre projet. Le processus d’installation de cette bibliothèque est assez simple. Ouvrez le gestionnaire de packages NuGet, recherchez Aspose.HTML et installez. Vous pouvez également utiliser la commande suivante depuis la console Package Manager:

Install-Package Aspose.HTML

Comment rendre un canevas HTML en C#

L’espace de noms Aspose.Html.Dom.Canvas fournit un moyen de dessiner des graphiques via l’élément HTML <canvas> et se concentre en grande partie sur les graphiques 2D. L’extrait de code C# suivant montre comment utiliser la fonctionnalité de dessin de HTML5 Canvas pour restituer des graphiques 2D personnalisés avec du texte et une forme remplie du dégradé radial :

using Aspose.Html;
using Aspose.Html.Converters;
using Aspose.Html.Rendering.Pdf;
using System.IO;
...

    // Create an HTML document
    using (var document = new HTMLDocument())
    {
        // Add a <canvas> element to the document
        var canvas = (HTMLCanvasElement)document.CreateElement("canvas");
        document.Body.AppendChild(canvas);

        // Set the width, height and style attributes of the canvas
        canvas.Width = 400;
        canvas.Height = 400;
        canvas.Style.Border = "1 solid #d3d3d3";
        
        // Get the rendering context of the canvas (2d context)
        var context = (Html.Dom.Canvas.ICanvasRenderingContext2D)canvas.GetContext("2d");

        // Create a radial gradient
        var gradient = context.CreateRadialGradient(200, 200, 40, 200, 200, 140);
        gradient.AddColorStop(0, "#c11700");
        gradient.AddColorStop(0.5, "orange");
        gradient.AddColorStop(1, "#5a2100");

        // Write the text
        context.Font = "bold 28px serif";
        context.FillText("Radial Gradient", 100, 40);

        // Fill the rectangle with the radial gradient
        context.FillStyle = gradient;
        context.FillRect(50, 50, 400, 400);

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

        // Create the PDF output device
        using var device = new PdfDevice(outputPath);

        // Render HTML5 Canvas to PDF
        document.RenderTo(device);
    }

Guide étape par étape – CanvasRenderingContext2D

1. Utilisez le constructeur HTMLDocument() pour initialiser un document HTML. Dans l’exemple, nous créons du HTML à partir de zéro, mais vous pouvez également charger le document à partir d’un fichier ou d’une URL.
2. Créez un élément <canvas> à l’aide de la méthode CreateElement() et ajoutez-le au corps du document HTML. Définissez les attributs requis pour l’élément <canvas>, par exemple, width, height et style.
3. Pour utiliser le contexte de canevas 2D, vous devez appeler la méthode GetContext() sur l’élément <canvas> et utiliser 2d comme argument.
4. L’étape suivante est le dessin sur un canevas HTML :
   • Un dégradé radial est créé à l’aide de la méthode CreateRadialGradient() , définissant des arrêts de couleur à différentes positions pour créer une transition douce des couleurs.
   • Le texte est écrit sur le canevas à l’aide de la méthode FillText() . Utilisez la propriété Font du contexte de rendu 2D pour définir les paramètres de police pour le rendu du texte.
   • Le rectangle du canevas est rempli avec le dégradé radial précédemment créé à l’aide de la méthode FillRect() .
5. Rendu du canevas HTML5 au format PDF :
   • Utilisez l’un des constructeurs PdfDevice() pour créer un objet de la classe PdfDevice.
   • Appelez la méthode RenderTo(device) . Cette méthode prend l’objet de la classe PdfDevice en paramètre.

Ainsi, ce code C# crée un document PDF avec du texte et un dégradé radial dessinés sur le canevas. Le fichier PDF résultant est enregistré dans le chemin de sortie spécifié.

Moteur de rendu HTML

L’espace de noms Aspose.Html.Rendering propose la classe HtmlRenderer qui est responsable du rendu des documents HTML via l’implémentation de l’interface IDevice. Le dispositif de rendu encapsule une surface de dessin 2D. Actuellement, l’API Aspose.HTML for .NET fournit les implémentations suivantes : PdfDevice, XpsDevice, DocDevice et ImageDevice, qui sont utilisées respectivement pour générer les formats de fichiers PDF, XPS, DOCX et Image.

Dans l’exemple que nous avons examiné ci-dessus, un document HTML a été rendu au format PDF. Mais vous pouvez choisir un autre périphérique de rendu et convertir le document dans un autre format dont vous avez besoin.

Aspose.HTML for .NET – Documentation

Aspose.HTML for .NET est une bibliothèque d’analyse HTML avancée. On peut créer, modifier, naviguer dans les nœuds, extraire des données, fusionner et convertir des fichiers HTML, XHTML, MD, EPUB et MHTML en PDF, DOCX, images et autres formats populaires. De plus, il gère également CSS, HTML Canvas, SVG, XPath et JavaScript prêts à l’emploi pour étendre les tâches de manipulation. Pour plus de détails sur l’installation de la bibliothèque C# et la configuration système requise, veuillez vous référer à la Documentation Aspose.HTML .

Dans l’article Modifier HTML5 Canvas – С# Exemples , vous découvrirez HTML Canvas et comment travailler avec un document contenant l’élément HTML5 <canvas> à l’aide d’Aspose.HTML pour l’API .NET.

Dans le chapitre Convertisseurs de réglage fin , Aspose.HTML for .NET propose d’autres moyens de restituer des documents HTML qui peuvent vous donner plus de contrôle sur le processus de rendu dans votre application C#. Notre bibliothèque C# implémente un ensemble de périphériques de rendu : PdfDevice, XpsDevice, DocDevice et ImageDevice. Chacun a son ensemble unique d’options implémentées avec les classes PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions et ImageRenderingOptions, respectivement.