Utiliser CanvasRenderingContext2D en C#

Dessiner sur HTML Canvas avec une API .NET

Aspose.HTML for .NET expose le contexte HTML Canvas 2D au moyen de l’interface ICanvasRenderingContext2D . Créez un HTMLCanvasElement, demandez son contexte "2d", exécutez les commandes de dessin en C#, puis effectuez le rendu du HTMLDocument contenant le canevas en PDF ou dans un autre format pris en charge.

Dessiner sur HTML Canvas et effectuer le rendu en PDF

Cet exemple crée un canevas de 500 × 180 pixels, dessine un texte en dégradé et un rectangle dans ses limites, puis effectue le rendu du document HTML terminé dans canvas.pdf.

using Aspose.Html;
using Aspose.Html.Dom.Canvas;
using Aspose.Html.Rendering.Pdf;

using HTMLDocument document = new HTMLDocument();

// Create and configure the canvas
HTMLCanvasElement canvas =
    (HTMLCanvasElement)document.CreateElement("canvas");
canvas.Width = 500;
canvas.Height = 180;
canvas.SetAttribute("style", "border: 1px solid #d3d3d3;");
document.Body.AppendChild(canvas);

// Get the 2D drawing context
ICanvasRenderingContext2D context =
    (ICanvasRenderingContext2D)canvas.GetContext("2d");

// Create a horizontal gradient
ICanvasGradient gradient =
    context.CreateLinearGradient(0, 0, canvas.Width, 0);
gradient.AddColorStop(0, "magenta");
gradient.AddColorStop(0.5, "blue");
gradient.AddColorStop(1, "red");

// Draw gradient text and a rectangle
context.FillStyle = gradient;
context.Font = "bold 32px sans-serif";
context.FillText("HTML Canvas 2D", 20, 70);
context.FillRect(20, 110, 460, 30);

// Render the HTML document to PDF
using PdfDevice device = new PdfDevice("canvas.pdf");
document.RenderTo(device);

Étapes pour dessiner et rendre HTML Canvas

1. Créez un HTMLDocument et ajoutez un HTMLCanvasElement à son corps.
2. Définissez Width et Height pour déterminer les dimensions bitmap et l’espace de coordonnées.
3. Appelez GetContext("2d") et convertissez le résultat en ICanvasRenderingContext2D.
4. Configurez les styles et appelez des méthodes comme FillText() et FillRect() .
5. Créez un PdfDevice et transmettez-le à RenderTo() pour écrire le document en PDF.

Fonctions HTML Canvas 2D et notes de rendu

• Formes et tracés. Dessinez des rectangles remplis ou avec contour, des lignes, des courbes, des arcs et des tracés personnalisés avec les méthodes Canvas 2D.
• Texte et images. Définissez les polices et styles de dessin, affichez du texte et placez des sources d’image prises en charge sur le canevas.
• Couleurs, dégradés et motifs. Affectez des couleurs unies, des objets ICanvasGradient ou des motifs à FillStyle et StrokeStyle.
• Transformations et composition. Effectuez une translation, rotation, mise à l’échelle ou découpe, contrôlez l’opacité et choisissez comment les nouvelles opérations se combinent aux pixels existants.
• Les dimensions bitmap sont importantes. Width et Height définissent le bitmap interne. Modifier uniquement la taille CSS peut étirer les pixels et réduire la netteté.
• Le rendu capture l’état actuel. Terminez les commandes avant d’appeler RenderTo(). Utilisez PdfDevice, XpsDevice, DocDevice ou ImageDevice pour une autre sortie prise en charge.

Documentation sur Canvas 2D et le rendu

Consultez Modifier HTML5 Canvas pour les deux processus pris en charge: charger du HTML qui dessine avec JavaScript et dessiner directement avec l’API Canvas 2D C#. La référence API ICanvasRenderingContext2D répertorie les propriétés et méthodes disponibles. Consultez Périphériques de rendu pour une sortie PDF, XPS, DOCX ou image avec des options propres au périphérique.

Installer Aspose.HTML for .NET

Installez Aspose.HTML for .NET depuis NuGet avec l’interface CLI .NET :

dotnet add package Aspose.HTML

Vous pouvez également utiliser l’interface du gestionnaire de packages NuGet ou exécuter Install-Package Aspose.HTML dans la console du gestionnaire de packages. Consultez le guide d’installation pour la configuration, ou demandez une licence temporaire afin d’évaluer l’API sans limitations.

Questions fréquentes sur HTML Canvas 2D

1. Quelle est la différence entre HTMLCanvasElement et ICanvasRenderingContext2D?

L’élément HTMLCanvasElement représente le nœud <canvas> et définit ses dimensions bitmap. ICanvasRenderingContext2D est l’interface de dessin renvoyée par GetContext("2d"); elle fournit les opérations de style, tracé, texte, image, transformation et pixels.

2. Pourquoi le résultat HTML Canvas peut-il sembler flou ou étiré?

Les propriétés Width et Height définissent le bitmap interne. Si CSS l’affiche dans des dimensions très différentes, le navigateur ou le moteur de rendu redimensionne les pixels. Définissez les dimensions bitmap selon la sortie voulue au lieu de compter uniquement sur CSS.

3. Aspose.HTML peut-il rendre un Canvas dessiné par JavaScript?

Oui. Chargez un document HTML contenant l’élément <canvas> et son script, laissez l’exécution du script se terminer, puis convertissez ou rendez le document. Le dessin direct en C# avec ICanvasRenderingContext2D est disponible lorsque JavaScript est inutile.

4. Le rendu de HTML Canvas en PDF convertit-il le dessin en vecteurs HTML ou SVG modifiables?

Non. Canvas est une surface de dessin bitmap. Le rendu conserve son état visible dans le document de sortie, mais ne reconstruit pas le dessin sous forme d’éléments HTML ou de tracés SVG modifiables.

5. Puis-je enregistrer HTML Canvas comme image plutôt qu’en PDF?

Oui. Effectuez le rendu du HTMLDocument contenant le canevas au moyen d’un ImageDevice configuré pour la sortie raster requise. Le canevas reste dans la mise en page; la taille, les marges et le HTML environnant peuvent donc affecter l’image.