HTML5 Canvas bearbeiten – С# Beispiele

Was ist HTML Canvas?

Das HTML Canvas-Element ist ein HTML5-Element in einem HTML-Dokument, das mit dem Tag <canvas> hinzugefügt wird. Das Element <canvas> ist ein Container für Grafiken, und Sie müssen JavaScript verwenden, um die Grafiken tatsächlich zu zeichnen – also dynamisch Grafiken zu erstellen und zu bearbeiten. HTML5 Canvas bietet einen 2D-Zeichenkontext, der zum Erstellen und Bearbeiten von grafischen Elementen wie Linien, Pfaden, Formen, Bildern und Text verwendet werden kann. Das Element <canvas> ist Teil von HTML5 und ermöglicht das skriptfähige dynamische Rendering von 2D-Formen und Bitmaps. Dabei handelt es sich um ein prozedurales Modell auf niedriger Ebene, das eine Bitmap aktualisiert. HTML5 Canvas, das für das Rendering von Diagrammen, Spielgrafiken, Kunst oder anderen visuellen Bildern verwendet wird, ist in der Liste der eingebauten Formate der Aspose.HTML for .NET-Bibliothek enthalten.

Das <canvas> Element muss haben:

• Attribut id, damit es von JavaScript referenziert werden kann.
• Attribute width und height, um die Größe des Canvas zu definieren.

Das HTML Canvas-Element hat auch andere Attribute, die Sie einstellen können, um sein Verhalten und Aussehen zu konfigurieren. Wenn Sie zum Beispiel einen Rahmen hinzufügen möchten, verwenden Sie das Attribut style. Das <canvas>-Element unterstützt auch die Globalen Attribute und in HTML.

HTML5 Canvas – Bearbeiten in C#

Um Canvas als Teil eines HTML-Dokuments zu rendern, brauchen Sie keine besondere Manipulation, sondern können das Dokument einfach wie gewohnt rendern. Der folgende Codeschnipsel zeigt, wie man mit einem Dokument arbeitet, das ein HTML5 Canvas-Element enthält:

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

In diesem Beispiel wird ein HTML-Dokument von Grund auf neu erstellt. Die Variable code enthält HTML-Inhalt, der ein Dokument mit einem eingebetteten <canvas>-Element erzeugt, und verwendet JavaScript, um “Hello, World” auf der Leinwand zu zeichnen. Lassen Sie uns den C#-Code Schritt für Schritt aufschlüsseln:

1. Bereiten Sie einen HTML-Code mit HTML5 Canvas vor und verwenden Sie die Methode System.IO.File.WriteAllText(), um den HTML-Code in eine Datei namens “document.html” zu schreiben.
2. Initialisieren Sie ein HTML-Dokument aus der Datei mit Hilfe der Klasse HTMLDocument.
3. Rufen Sie die Methode ConvertHTML(document, options, outputPath) auf, um HTML mit den Standardspeicheroptionen in PDF zu konvertieren.

Canvas-Rendering-Kontext 2D

Neben der Verarbeitung von HTML5 Canvas als Teil eines HTML-Dokuments können Sie auch direkt in Ihrem C#-Code mit Canvas arbeiten. Aspose.HTML for .NET bietet die Schnittstelle ICanvasRenderingContext2D für diese Operationen, die vollständig auf dem offiziellen Standard basiert und zum Zeichnen von 2D-Grafiken auf einem Canvas-Element in HTML verwendet wird. Sie bietet eine Reihe von Methoden und Eigenschaften, die es Entwicklern ermöglichen, Grafiken wie Linien, Formen, Text und Bilder innerhalb des Canvas zu erstellen und zu manipulieren.

Hauptmerkmale von CanvasRenderingContext2D

Das Element <canvas> in Kombination mit dem 2D-Rendering-Kontext ermöglicht es Entwicklern, dynamische und interaktive Grafiken direkt auf einer Webseite zu erstellen. Hier sind einige wichtige Aspekte von CanvasRenderingContext2D:

1. Mit Methoden wie FillRect() und StrokeRect() können Sie mühelos Formen zeichnen.
2. CanvasRenderingContext2D erleichtert die Textdarstellung auf der Leinwand mit Methoden wie FillText() und StrokeText(), was eine dynamische Textdarstellung mit unterschiedlichen Stilen und Schriftarten ermöglicht.
3. Sie können das Aussehen von gezeichneten Elementen anpassen, indem Sie Eigenschaften wie FillStyle und StrokeStyle festlegen und so die Verwendung von Farbverläufen, Mustern und Volltonfarben ermöglichen.
4. Sie können Transformationen wie Translation, Rotation und Skalierung anwenden, die den Canvas-Raum dynamisch manipulieren und so komplexe grafische Anordnungen erleichtern.
5. CanvasRenderingContext2D unterstützt das Zeichnen und Manipulieren von Bildern auf der Leinwand durch Methoden wie DrawImage(), wodurch die Möglichkeiten zur Einbindung von Grafiken in die Benutzeroberfläche erweitert werden.

HTML5 Canvas 2D in PDF rendern

Das folgende Codeschnipsel zeigt, wie die Zeichenfunktion von HTML5 Canvas verwendet wird, um einen benutzerdefinierten Text zu rendern, der mit einem Farbverlaufspinsel gefüllt ist.

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

Im obigen Beispiel wurde ein HTML-Dokument mithilfe der Methode RenderTo(device) im PDF-Format gerendert. Sie können aber auch ein anderes Rendering-Gerät wählen und das HTML-Dokument in ein anderes Format konvertieren, das Sie benötigen. Das Rendern von Canvas-Inhalten in andere Formate, wie z. B. Bilder oder PDF-Dateien, kann dazu beitragen, eine konsistente und zuverlässige Anzeige in verschiedenen Browsern zu gewährleisten, es den Benutzern zu erleichtern, visuell konsistente Dokumente zu drucken oder weiterzugeben, und kann für Archivierungszwecke nützlich sein. Bei einigen Anwendungen kann das Rendern von Canvas-Inhalten in ein statisches Format die Sicherheit erhöhen, da es Endbenutzer daran hindert, dynamisches Bildmaterial zu manipulieren.

Das Rendern von HTML5-Canvas-Inhalten in andere Formate bietet also Flexibilität, verbessert die Kompatibilität und eröffnet verschiedene Möglichkeiten für die gemeinsame Nutzung, Archivierung und Integration dynamischer Grafiken in unterschiedlichen Kontexten. Die Wahl des Formats hängt von den spezifischen Anforderungen und Zielen der Webanwendung ab.

Um mehr über den Rendering-Prozess zu erfahren, lesen Sie bitte den Artikel Rendering Device.

Rendering-Optionen geben Ihnen zusätzliche Kontrolle über den Rendering-Prozess. Um mehr über sie zu erfahren, lesen Sie bitte den Artikel Rendering Optionen.

Um mehr über die Verwendung von HTML5 Canvas zu erfahren, lesen Sie bitte das beliebte öffentliche HTML Canvas Tutorial.