Редактирование HTML5 Canvas на С# – Aspose.HTML for .NET

Что такое HTML Canvas?

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

Элемент <canvas> должен иметь:

Атрибут id, чтобы на него мог ссылаться JavaScript.
Атрибуты width и height для определения размера canvas.

Элемент HTML Canvas также имеет другие атрибуты, которые можно настроить для настройки его поведения и внешнего вида. Например, если вы хотите добавить границу, используйте атрибут style. Элемент <canvas> также поддерживает Global Attributes и в HTML.

HTML5 Canvas – Как редактировать на C#

Чтобы визуализировать canvas как часть HTML-документа, вам не нужно никаких особых манипуляций, просто визуализируйте документ, как обычно. В следующем фрагменте кода показано, как работать с документом, содержащим элемент Canvas HTML5:

 1// Prepare an output path
 2string outputPath = Path.Combine(OutputDir, "output.pdf");
 3
 4// Prepare a document with HTML5 Canvas inside and save it to the file "document.html"
 5var code = @"
 6    <canvas id=myCanvas width='200' height='100' style='border:1px solid #d3d3d3;'></canvas>
 7    <script>
 8        var c = document.getElementById('myCanvas');
 9        var context = c.getContext('2d');
10        context.font = '30px Arial';
11        context.fillStyle = 'red';
12        context.fillText('Hello, World', 40, 50);
13    </script>";
14
15System.IO.File.WriteAllText("document.html", code);
16
17// Initialize an HTML document from the html file
18using (var document = new HTMLDocument("document.html"))
19{
20    // Convert HTML to PDF
21    Converter.ConvertHTML(document, new PdfSaveOptions(), outputPath);
22}

view raw Example-EditHTML5Canvas hosted with ❤ by GitHub

В примере мы создаем HTML-документ с нуля. Переменная code содержит код, который генерирует HTML-документ со встроенным элементом <canvas> и использует JavaScript для рисования «Hello World» на холсте. Давайте разберем код C# шаг за шагом:

Подготовьте HTML-код с HTML5 Canvas внутри и используйте метод System.IO.File.WriteAllText() для записи HTML-кода в файл с именем «document.html».
Инициализируйте HTML-документ из файла с помощью класса HTMLDocument.
Вызовите метод ConvertHTML(document, options, outputPath), чтобы конвертировать HTML в PDF с опциями сохранения по умолчанию.

Canvas Rendering Context 2D

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

Ключевые особенности CanvasRenderingContext2D

Элемент <canvas> в сочетании с контекстом 2D-рендеринга позволяет разработчикам создавать динамические и интерактивные визуальные эффекты непосредственно на веб-странице. Вот некоторые ключевые аспекты CanvasRenderingContext2D:

С помощью таких методов, как FillRect() и StrokeRect() вы можете легко рисовать фигуры.
CanvasRenderingContext2D упрощает рендеринг текста на холсте с помощью таких методов, как FillText() и StrokeText(), позволяющий отображать динамический текст с различными стилями и шрифтами.
Вы можете настроить внешний вид нарисованных элементов, задав такие свойства, как FillStyle и StrokeStyle, позволяющий использовать градиенты, узоры и сплошные цвета.
Вы можете применять такие преобразования, как перемещение, вращение и масштабирование, которые позволяют динамически манипулировать пространством холста, облегчая создание сложных графических композиций.
CanvasRenderingContext2D поддерживает рисование и манипулирование изображениями на холсте с помощью таких методов, как DrawImage(), расширение возможностей включения графики в пользовательский интерфейс.

Рендеринг HTML5 Canvas 2D в PDF

В следующем фрагменте кода показано, как использовать функцию рисования HTML5 Canvas для визуализации пользовательского текста, заполненного градиентной кистью.

 1    // Create an empty HTML document
 2    using var document = new HTMLDocument();
 3    
 4    // Create a <canvas> element
 5    var canvas = (HTMLCanvasElement)document.CreateElement("canvas");
 6
 7    // with a specified size
 8    canvas.Width = 500;
 9    canvas.Height = 150;
10
11    // and append it to the document body
12    document.Body.AppendChild(canvas);
13
14    // Get the canvas rendering context to draw
15    var context = (Html.Dom.Canvas.ICanvasRenderingContext2D)canvas.GetContext("2d");
16
17    // Prepare a gradient brush
18    var gradient = context.CreateLinearGradient(0, 0, canvas.Width, 0);
19    gradient.AddColorStop(0, "magenta");
20    gradient.AddColorStop(0.4, "blue");
21    gradient.AddColorStop(0.9, "red");
22
23    // Assign the brush to the content
24    context.FillStyle = gradient;
25    context.StrokeStyle = gradient;
26
27    // Write the text
28    context.FillText("Hello, World!", 10, 90, 500);
29
30    // Fill the rectangle
31    context.FillRect(0, 95, 500, 100);
32
33    // Prepare an output path
34    string outputPath = Path.Combine(OutputDir, "canvas.pdf");
35
36    // Create the PDF output device
37    using (var device = new PdfDevice(outputPath))
38    {
39        // Render HTML5 Canvas to PDF
40        document.RenderTo(device);
41    }
42}

view raw Example-CanvasRenderingContext2D hosted with ❤ by GitHub

В примере, который мы рассмотрели выше, HTML-документ был отображен в формате PDF c помощью метода RenderTo(device). Но вы можете выбрать другое устройство рендеринга device и конвертировать HTML документ в другой формат, который вам нужен. Рендеринг содержимого холста в другие форматы, такие как изображения или PDF-файлы, может помочь обеспечить согласованное и надежное отображение в различных браузерах, облегчить пользователям печать или обмен визуально согласованными документами и может быть ценным для целей архивирования. Для некоторых приложений преобразование содержимого холста в статический формат может повысить безопасность, предотвращая манипулирование или подделку динамических визуальных элементов конечными пользователями.

Таким образом, рендеринг содержимого <canvas> HTML5 в другие форматы обеспечивает гибкость, улучшает совместимость и открывает различные возможности для совместного использования, архивирования и интеграции динамической графики в различных контекстах. Выбор формата зависит от конкретных потребностей и целей веб-приложения.

Чтобы узнать больше о процессе рендеринга, прочтите статью Устройство рендеринга.

Параметры рендеринга дают вам дополнительный контроль над процессом отображения документа. Чтобы узнать больше о них, прочтите статью Параметры рендеринга.

Чтобы узнать больше о том, как использовать HTML5 Canvas, вы можете прочитать популярный общедоступный HTML Canvas Tutorial.

Расширенное программирование HTML Output Streams