Использование CanvasRenderingContext2D в C#

Рисование на HTML Canvas с помощью .NET API

Aspose.HTML for .NET предоставляет контекст HTML Canvas 2D через интерфейс ICanvasRenderingContext2D . Создайте HTMLCanvasElement, запросите его контекст "2d", задайте команды рисования в C#, затем выполните рендеринг содержащего холст HTMLDocument в PDF или другой поддерживаемый формат.

Рисование на HTML Canvas и рендеринг в PDF

Пример создаёт холст размером 500 × 180 пикселей, рисует градиентный текст и прямоугольник в его границах, а затем выполняет рендеринг готового HTML-документа в файл 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);

Этапы рисования и рендеринга HTML Canvas

1. Создайте HTMLDocument и добавьте HTMLCanvasElement в тело документа.
2. Задайте свойства холста Width и Height, определяющие размеры растровой поверхности и систему координат.
3. Вызовите GetContext("2d") и приведите результат к типу ICanvasRenderingContext2D.
4. Настройте стили рисования и вызовите методы, например FillText() и FillRect() .
5. Создайте PdfDevice и передайте его методу RenderTo() , чтобы записать документ в PDF.

Возможности и особенности рендеринга HTML Canvas 2D

• Фигуры и контуры. Рисуйте залитые или обведённые прямоугольники, линии, кривые, дуги и произвольные контуры методами Canvas 2D.
• Текст и изображения. Настраивайте шрифты и стили рисования, выводите текст и размещайте на холсте поддерживаемые источники изображений.
• Цвета, градиенты и шаблоны. Назначайте сплошные цвета, объекты ICanvasGradient или шаблоны свойствам FillStyle и StrokeStyle.
• Трансформации и композиция. Выполняйте перенос, поворот, масштабирование и обрезку, управляйте прозрачностью и выбирайте способ наложения новых операций на существующие пиксели.
• Важность растровых размеров. Свойства Width и Height определяют внутренний растр холста. Изменение только CSS-размеров может растянуть растр и снизить визуальную чёткость.
• Рендеринг фиксирует текущее состояние холста. Завершите команды рисования перед вызовом RenderTo(). Используйте PdfDevice, XpsDevice, DocDevice или ImageDevice, если требуется другой поддерживаемый результат.

Документация по Canvas 2D и рендерингу

В руководстве Работа с HTML5 Canvas рассмотрены два поддерживаемых сценария – загрузка HTML, который рисует на холсте через JavaScript, и непосредственное рисование с помощью C# API Canvas 2D. Справочник API ICanvasRenderingContext2D содержит доступные свойства и методы рисования. Если приложению нужен вывод в PDF, XPS, DOCX или изображение с параметрами конкретного формата, обратитесь к руководству Устройства рендеринга .

Установка Aspose.HTML for .NET

Установите Aspose.HTML for .NET из NuGet с помощью .NET CLI:

dotnet add package Aspose.HTML

Также можно использовать интерфейс диспетчера пакетов NuGet или выполнить Install-Package Aspose.HTML в консоли диспетчера пакетов. Подробные инструкции приведены в руководстве по установке . Чтобы протестировать API без ограничений ознакомительной версии, запросите временную лицензию .

Вопросы об HTML Canvas 2D

1. Чем отличаются HTMLCanvasElement и ICanvasRenderingContext2D?

Объект HTMLCanvasElement представляет узел <canvas> и определяет размеры его растровой поверхности. ICanvasRenderingContext2D – это возвращаемый методом GetContext("2d") интерфейс рисования, который предоставляет стили, контуры, текстовые, графические, трансформационные и пиксельные операции для этого холста.

2. Почему результат HTML Canvas может выглядеть размытым или растянутым?

Свойства холста Width и Height задают размеры внутреннего растра. Если CSS отображает этот растр в существенно других размерах, браузер или средство рендеринга масштабирует пиксели. Задайте растровые размеры для требуемого результата, а не полагайтесь только на CSS-масштабирование.

3. Может ли Aspose.HTML выполнить рендеринг Canvas, нарисованного с помощью JavaScript?

Да. Загрузите HTML-документ с элементом <canvas> и соответствующим скриптом, дождитесь завершения выполнения скрипта, затем выполните преобразование или рендеринг документа. Если JavaScript не нужен, рисуйте непосредственно из C# через ICanvasRenderingContext2D.

4. Превращает ли рендеринг HTML Canvas в PDF рисунок в редактируемые векторные элементы HTML или SVG?

Нет. Canvas является растровой поверхностью рисования. Рендеринг сохраняет её видимое состояние в выходном документе, но не восстанавливает рисунок в виде редактируемых HTML-элементов или SVG-контуров.

5. Можно ли сохранить HTML Canvas как изображение вместо PDF?

Да. Выполните рендеринг содержащего холст HTMLDocument через ImageDevice, настроенный для требуемого растрового формата. Холст остаётся частью макета страницы, поэтому размер страницы, поля и окружающий HTML могут влиять на итоговое изображение.