CanvasRenderingContext2D – C#

Что такое CanvasRenderingContext2D?

HTML-элемент <canvas> – это растровая область на HTML-странице. Aspose.HTML for .NET предоставляет интерфейс ICanvasRenderingContext2D , который используется для рисования прямоугольников, текста, изображений и других объектов на холсте HTML. Он предоставляет контекст 2D-рендеринга для поверхности рисования элемента <canvas>. С его помощью вы можете рисовать фигуры, линии, кривые, прямоугольники, текст и изображения, использовать цвета, вращения, преобразования и другие манипуляции с пикселями.

Сначала убедитесь, что в вашем проекте установлена Aspose.HTML for .NET. Процесс установки этой библиотеки довольно прост. Вы можете инсталлировать её через консоль диспетчера пакетов NuGet, используя следующую команду:

Install-Package Aspose.HTML

Как визуализировать HTML-холст используя C#

Пространство имен Aspose.Html.Dom.Canvas предоставляет средства для рисования графики через элемент HTML <canvas> и в основном ориентировано на 2D-графику. В следующем фрагменте кода C# показано, как использовать функцию рисования HTML5 Canvas для рендеринга пользовательской 2D-графики с текстом и прямоугольником, заполненным радиальным градиентом:

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() и добавьте его в тело HTML-документа. Установите необходимые атрибуты для элемента <canvas>, например, width, height, style.
3. Чтобы использовать контекст 2D-холста, вам нужно вызвать метод GetContext() для элемента <canvas> и использовать 2d в качестве аргумента.
4. Следующий шаг – рисование на HTML-холсте:
   • Радиальный градиент создается с помощью метода CreateRadialGradient() , определяющего остановки цвета в разных положениях для создания плавного перехода цветов.
   • Текст пишется на холсте с помощью метода FillText() . Используйте свойство Font контекста 2D-рендеринга context, чтобы установить настройки шрифта для рендеринга текста.
   • Прямоугольник холста заполняется ранее созданным радиальным градиентом с помощью метода FillRect() .
5. Преобразование HTML5 Canvas в PDF:
   • Используйте один из конструкторов PdfDevice() для создания объекта класса PdfDevice.
   • Вызовите метод RenderTo(device) . Этот метод принимает в качестве параметра экземпляр класса PdfDevice.

Итак, этот код C# создает PDF-документ с текстом и радиальным градиентом, нарисованным на холсте. Полученный PDF-файл сохраняется по указанному пути (output path).

HTML-рендерер

Пространство имен Aspose.Html.Rendering предлагает класс HtmlRenderer , который отвечает за рендеринг HTML-документов посредством реализации интерфейса IDevice. Устройство рендеринга инкапсулирует 2D-поверхность рисования. В настоящее время Aspose.HTML for .NET API предоставляет следующие реализации: 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 .

В статье Редактирование HTML5 Canvas – примеры С# вы узнаете об HTML Canvas и о том, как работать с документом, содержащим элемент <canvas>, с использованием Aspose.HTML for .NET API.

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