CanvasRenderingContext2D – C#

Was ist CanvasRenderingContext2D?

Das HTML-Element <canvas> ​​ist ein Bitmap-Bereich in einer HTML-Seite. Aspose.HTML for .NET stellt die Schnittstelle ICanvasRenderingContext2D bereit, die zum Zeichnen von Rechtecken, Text, Bildern und anderen Objekten auf der HTML-Zeichenfläche verwendet wird. Es stellt den 2D-Rendering-Kontext für die Zeichenoberfläche eines <canvas>-Elements bereit. Mit seiner Hilfe können Sie Formen, Linien, Kurven, Kästchen, Text und Bilder zeichnen, Farben, Drehungen, Transformationen und andere Pixelmanipulationen verwenden.

Stellen Sie zunächst sicher, dass Aspose.HTML for .NET in Ihrem Projekt installiert ist. Der Installationsprozess dieser Bibliothek ist relativ einfach. Sie können es über die NuGet Package Manager-Konsole mit dem folgenden Befehl installieren:

Install-Package Aspose.HTML

So rendern Sie HTML-Canvas in C#

Der Namespace Aspose.Html.Dom.Canvas bietet eine Möglichkeit zum Zeichnen von Grafiken über das HTML-Element <canvas> ​​und konzentriert sich hauptsächlich auf 2D-Grafiken. Der folgende C#-Codeausschnitt zeigt, wie Sie die Zeichenfunktion von HTML5 Canvas verwenden, um benutzerdefinierte 2D-Grafiken mit Text und einer mit dem radialen Farbverlauf gefüllten Form zu rendern:

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);
    }

Schritt-für-Schritt-Anleitung – CanvasRenderingContext2D

1. Verwenden Sie den HTMLDocument()-Konstruktor, um ein HTML-Dokument zu initialisieren. Im Beispiel erstellen wir HTML von Grund auf, Sie können das Dokument aber auch aus einer Datei oder URL laden.
2. Erstellen Sie mit der Methode CreateElement() ein <canvas>-Element und hängen Sie es an den Hauptteil des HTML-Dokuments an. Legen Sie die erforderlichen Attribute für das Element <canvas> ​​fest, zum Beispiel width, height und style.
3. Um den 2D-Canvas-Kontext zu verwenden, müssen Sie die Methode GetContext() für das Element <canvas> ​​aufrufen und 2d als Argument verwenden.
4. Der nächste Schritt ist das Zeichnen auf der HTML-Leinwand:
   • Mit der Methode CreateRadialGradient() wird ein radialer Farbverlauf erstellt, der Farbstopps an verschiedenen Positionen definiert, um einen sanften Farbübergang zu erzeugen.
   • Text wird mit der Methode FillText() auf die Leinwand geschrieben. Verwenden Sie die Eigenschaft Font des 2D-Rendering-Kontexts, um Schriftarteinstellungen für die Textwiedergabe festzulegen.
   • Das Leinwandrechteck wird mithilfe der Methode FillRect() mit dem zuvor erstellten radialen Farbverlauf gefüllt.
5. HTML5-Canvas in PDF rendern:
   • Verwenden Sie einen der PdfDevice() -Konstruktoren, um ein Objekt der PdfDevice-Klasse zu erstellen.
   • Rufen Sie die Methode RenderTo(device) auf. Diese Methode verwendet das Objekt der PdfDevice-Klasse als Parameter.

Dieser C#-Code erstellt also ein PDF-Dokument mit Text und einem radialen Farbverlauf auf der Leinwand. Die resultierende PDF-Datei wird im angegebenen Ausgabepfad gespeichert.

HTML-Renderer

Der Namespace Aspose.Html.Rendering bietet die Klasse HtmlRenderer , die für die Darstellung von HTML-Dokumenten über die IDevice-Schnittstellenimplementierung verantwortlich ist. Das Rendering-Gerät kapselt eine 2D-Zeichenoberfläche. Derzeit bietet die Aspose.HTML for .NET-API die folgenden Implementierungen: PdfDevice, XpsDevice, DocDevice und ImageDevice, die zum Generieren der Dateiformate PDF, XPS, DOCX und Bild verwendet werden.

In dem oben betrachteten Beispiel wurde ein HTML-Dokument im PDF-Format gerendert. Sie können jedoch ein anderes Rendering-Gerät auswählen und das Dokument in ein anderes benötigtes Format konvertieren.

Aspose.HTML for .NET – Dokumentation

Aspose.HTML for .NET ist eine erweiterte HTML-Parsing-Bibliothek. Man kann erstellen, bearbeiten, durch Knoten navigieren, Daten extrahieren, HTML-, XHTML-, MD-, EPUB- und MHTML-Dateien zusammenführen und in PDF, DOCX, Bilder und andere gängige Formate konvertieren. Darüber hinaus verarbeitet es auch sofort CSS, HTML Canvas, SVG, XPath und JavaScript, um Manipulationsaufgaben zu erweitern. Weitere Einzelheiten zur Installation der C#-Bibliothek und zu den Systemanforderungen finden Sie in der Aspose.HTML-Dokumentation .

Im Artikel HTML5-Canvas bearbeiten – С#-Beispiele erfahren Sie mehr über HTML Canvas und wie Sie mithilfe der Aspose.HTML for .NET-API mit einem Dokument arbeiten, das das HTML5-Element <canvas> ​​enthält.

Im Kapitel Konverter zur Feinabstimmung bietet Aspose.HTML for .NET alternative Möglichkeiten zum Rendern von HTML-Dokumenten, die Ihnen mehr Kontrolle über den Renderprozess in Ihrer C#-Anwendung geben können. Unsere C#-Bibliothek implementiert eine Reihe von Rendering-Geräten – PdfDevice, XpsDevice, DocDevice und ImageDevice. Jede verfügt über einen eigenen Satz an Optionen, die jeweils mit den Klassen PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions und ImageRenderingOptions implementiert werden.