CanvasRenderingContext2D – C#

Що таке CanvasRenderingContext2D?

Елемент HTML <canvas> – це растрова область на сторінці HTML. Aspose.HTML for .NET надає інтерфейс ICanvasRenderingContext2D , який використовується для малювання прямокутників, тексту, зображень та інших об’єктів на полотні HTML. Він надає контекст 2D візуалізації для поверхні малювання елемента <canvas>. З його допомогою можна малювати фігури, лінії, криві, прямокутники, текст і зображення, використовувати кольори, повороти, трансформації та інші маніпуляції з пікселями.

По-перше, переконайтеся, що у вашому проекті встановлено Aspose.HTML for .NET . Процес додавання цієї бібліотеки досить простий. Відкрийте менеджер пакетів NuGet, знайдіть Aspose.HTML і встановіть. Ви також можете використати таку команду з консолі диспетчера пакетів:

Install-Package Aspose.HTML

Як відобразити полотно HTML Canvas на C#

Простір імен Aspose.Html.Dom.Canvas надає засоби для малювання графіки за допомогою елемента HTML <canvas> і в основному зосереджується на 2D-графіці. У наведеному нижче фрагменті коду C# показано, як використовувати функцію малювання HTML5 Canvas для візуалізації двовимірної графіки з текстом і фігурою, заповненою радіальним градієнтом:

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

Покроковий посібник – CanvasRenderingContext2D

1. Використовуйте конструктор HTMLDocument(), щоб ініціалізувати документ HTML. У прикладі ми створюємо HTML з нуля, але ви також можете завантажити документ із файлу чи URL-адреси.
2. Створіть елемент <canvas> за допомогою методу CreateElement() і додайте його до body документа HTML. Встановіть необхідні атрибути для елемента <canvas>, наприклад, width, height і style.
3. Щоб використовувати контекст двовимірного полотна, потрібно викликати метод GetContext() елемента <canvas> і використовувати 2d як аргумент.
4. Наступним кроком є ​​малювання на полотні HTML:
   • Радіальний градієнт створюється за допомогою методу CreateRadialGradient() , що визначає межі кольорів у різних положеннях для створення плавного переходу кольорів.
   • Текст пишеться на полотні за допомогою методу FillText() . Використовуйте властивість Font контексту 2D візуалізації (context), щоб встановити параметри шрифту для відтворення тексту.
   • Прямокутник полотна заливається попередньо створеним радіальним градієнтом за допомогою методу FillRect() .
5. Рендеринг Canvas HTML5 у PDF:
   • Використовуйте один із конструкторів PdfDevice() для створення об’єкта класу PdfDevice.
   • Викличте метод RenderTo(device) . Цей метод приймає об’єкт класу PdfDevice як параметр.

Отже, цей код C# створює PDF-документ із текстом і радіальним градієнтом, намальованим на полотні . Отриманий файл PDF зберігається за вказаним вихідним шляхом (output path).

HTML Renderer

Простір імен Aspose.Html.Rendering пропонує клас HtmlRenderer , який відповідає за рендеринг документів HTML через реалізацію інтерфейсу IDevice. Пристрій візуалізації інкапсулює двовимірну поверхню малювання. Наразі API Aspose.HTML for .NET надає такі реалізації: PdfDevice, XpsDevice, DocDevice та ImageDevice, які використовуються для створення форматів файлів PDF, XPS, DOCX та Image відповідно.

У прикладі, який ми розглянули вище, документ HTML було відтворено у форматі PDF. Але ви можете вибрати інший пристрій візуалізації та конвертувати документ в інший потрібний формат.

Aspose.HTML for .NET – Документація

Aspose.HTML for .NET – це розширена бібліотека аналізу HTML. Можна створювати, редагувати, переміщатися між вузлами, витягувати дані, об’єднувати та конвертувати файли HTML, XHTML, MD, EPUB і MHTML у PDF, DOCX, зображення та інші популярні формати. Крім того, вона також готова обробляти CSS, HTML Canvas, SVG, XPath і JavaScript, щоб розширити завдання маніпулювання. Додаткову інформацію про встановлення бібліотеки C# і вимоги до системи ви знайдете у документації Aspose.HTML .

У статті Edit HTML5 Canvas – С# Examples ви дізнаєтеся про HTML Canvas і як працювати з документом, який містить HTML5 <canvas> елемент за допомогою Aspose.HTML for .NET API.

У розділі Fine-Tuning Converters Aspose.HTML for .NET надає альтернативні способи візуалізації HTML-документів, які можуть дати вам більше контролю над процесом рендерингу у вашому проекті C#. Наша бібліотека C# реалізує набір пристроїв візуалізації – PdfDevice, XpsDevice, DocDevice та ImageDevice. Кожен має свій унікальний набір параметрів зберігання, реалізованих за допомогою класів PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions і ImageRenderingOptions відповідно.