CanvasRenderingContext2D in C# verwenden

Mit einer .NET API auf HTML Canvas zeichnen

Aspose.HTML for .NET stellt den HTML Canvas 2D-Kontext über die Schnittstelle ICanvasRenderingContext2D bereit. Erstellen Sie ein HTMLCanvasElement, fordern Sie dessen "2d"-Kontext an, führen Sie Zeichenbefehle in C# aus und rendern Sie das enthaltende HTMLDocument als PDF oder in ein anderes unterstütztes Ausgabeformat.

Auf HTML Canvas zeichnen und als PDF rendern

Das Beispiel erstellt eine Zeichenfläche mit 500 × 180 Pixeln, zeichnet Verlaufstext und ein Rechteck innerhalb ihrer Grenzen und rendert das fertige HTML-Dokument als 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);

Schritte zum Zeichnen und Rendern von HTML Canvas

1. Erstellen Sie ein HTMLDocument und fügen Sie dessen Dokumentkörper ein HTMLCanvasElement hinzu.
2. Legen Sie Width und Height fest, um Bitmap-Abmessungen und Koordinatenraum zu definieren.
3. Rufen Sie GetContext("2d") auf und wandeln Sie das Ergebnis in ICanvasRenderingContext2D um.
4. Konfigurieren Sie Zeichenstile und rufen Sie Methoden wie FillText() und FillRect() auf.
5. Erstellen Sie ein PdfDevice und übergeben Sie es an RenderTo() , um das Dokument als PDF zu schreiben.

HTML Canvas 2D-Funktionen und Rendering-Hinweise

• Formen und Pfade. Zeichnen Sie gefüllte oder umrandete Rechtecke, Linien, Kurven, Bögen und benutzerdefinierte Pfade mit Canvas 2D-Methoden.
• Text und Bilder. Legen Sie Schriftarten und Zeichenstile fest, rendern Sie Text und platzieren Sie unterstützte Bildquellen auf der Zeichenfläche.
• Farben, Verläufe und Muster. Weisen Sie FillStyle und StrokeStyle Vollfarben, ICanvasGradient-Objekte oder Muster zu.
• Transformationen und Komposition. Verschieben, drehen, skalieren und beschneiden Sie, steuern Sie die Deckkraft und wählen Sie, wie neue Zeichenoperationen mit vorhandenen Pixeln kombiniert werden.
• Bitmap-Abmessungen sind wichtig. Width und Height definieren die zugrunde liegende Bitmap. Wird nur die CSS-Größe skaliert, kann die Bitmap gestreckt und unscharf werden.
• Das Rendering erfasst den aktuellen Zustand. Schließen Sie alle Zeichenbefehle vor RenderTo() ab. Verwenden Sie PdfDevice, XpsDevice, DocDevice oder ImageDevice für eine andere unterstützte Ausgabe.

Dokumentation zu Canvas 2D und Rendering

Unter HTML5 Canvas bearbeiten finden Sie beide unterstützten Abläufe: das Laden von HTML, das über JavaScript zeichnet, und das direkte Zeichnen mit der C# Canvas 2D API. Die ICanvasRenderingContext2D API-Referenz listet verfügbare Eigenschaften und Zeichenmethoden auf. Lesen Sie Rendering-Geräte , wenn PDF-, XPS-, DOCX- oder Bildausgabe mit gerätespezifischen Optionen erforderlich ist.

Aspose.HTML for .NET installieren

Installieren Sie Aspose.HTML for .NET aus NuGet mit der .NET CLI:

dotnet add package Aspose.HTML

Alternativ können Sie die Benutzeroberfläche des NuGet-Paket-Managers verwenden oder Install-Package Aspose.HTML in der Paket-Manager-Konsole ausführen. Einzelheiten zur Einrichtung finden Sie in der Installationsanleitung . Mit einer temporären Lizenz können Sie die API ohne Einschränkungen der Evaluierung testen.

Häufige Fragen zu HTML Canvas 2D

1. Worin unterscheiden sich HTMLCanvasElement und ICanvasRenderingContext2D?

Das Element HTMLCanvasElement stellt den <canvas>-Knoten dar und definiert seine Bitmap-Abmessungen. ICanvasRenderingContext2D ist die von GetContext("2d") zurückgegebene Zeichenschnittstelle mit Stil-, Pfad-, Text-, Bild-, Transformations- und Pixeloperationen.

2. Warum kann die HTML Canvas-Ausgabe unscharf oder gestreckt aussehen?

Die Eigenschaften Width und Height definieren die zugrunde liegende Bitmap. Zeigt CSS sie in deutlich anderen Abmessungen an, skaliert der Browser oder Renderer die Pixel. Legen Sie die Bitmap-Größe für die gewünschte Ausgabe fest, statt nur CSS-Skalierung zu verwenden.

3. Kann Aspose.HTML eine mit JavaScript gezeichnete Canvas rendern?

Ja. Laden Sie ein HTML-Dokument mit dem <canvas>-Element und seinem Skript, lassen Sie die Skriptausführung abschließen und konvertieren oder rendern Sie anschließend das Dokument. Direktes Zeichnen in C# mit ICanvasRenderingContext2D ist verfügbar, wenn JavaScript nicht benötigt wird.

4. Wandelt das Rendern von HTML Canvas in PDF die Zeichnung in bearbeitbare HTML- oder SVG-Vektoren um?

Nein. Canvas ist eine Bitmap-Zeichenfläche. Das Rendering bewahrt den sichtbaren Zustand im Ausgabedokument, rekonstruiert die Zeichnung jedoch nicht als bearbeitbare HTML-Elemente oder SVG-Pfade.

5. Kann ich HTML Canvas statt als PDF als Bild speichern?

Ja. Rendern Sie das enthaltende HTMLDocument über ein für die gewünschte Rasterausgabe konfiguriertes ImageDevice. Die Canvas bleibt Teil des Seitenlayouts, daher können Seitengröße, Ränder und umgebendes HTML das Ergebnis beeinflussen.