Редактирование HTML5 Canvas – Примеры С#

Что такое 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// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
 2// Prepare a document with HTML5 Canvas inside and save it to the file 'document.html'
 3var code = @"
 4    <canvas id=myCanvas width='200' height='100' style='border:1px solid #d3d3d3;'></canvas>
 5    <script>
 6        var c = document.getElementById('myCanvas');
 7        var context = c.getContext('2d');
 8        context.font = '20px Arial';
 9        context.fillStyle = 'red';
10        context.fillText('Hello World', 40, 50);
11    </script>";
12System.IO.File.WriteAllText("document.html", code);
13
14// Initialize an HTML document from the html file
15using (var document = new HTMLDocument("document.html"))
16{
17    // Convert HTML to PDF
18    Aspose.Html.Converters.Converter.ConvertHTML(document, new Aspose.Html.Saving.PdfSaveOptions(), "output.pdf");
19}

view raw Examples-CSharp-AdvancedUsage-HTML5Canvas-ManipulateUsingJavaScript.cs 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 для .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// For complete examples and data files, please go to https://github.com/aspose-html/Aspose.HTML-for-.NET
 2// Create an empty HTML document
 3using (var document = new Aspose.Html.HTMLDocument())
 4{
 5    // Create the Canvas element
 6    var canvas = (Aspose.Html.HTMLCanvasElement)document.CreateElement("canvas");
 7
 8    // with a specified size
 9    canvas.Width = 300;
10    canvas.Height = 150;
11
12    // and append it to the document body
13    document.Body.AppendChild(canvas);
14
15    // Get the canvas rendering context to draw
16    var context = (Aspose.Html.Dom.Canvas.ICanvasRenderingContext2D)canvas.GetContext("2d");
17
18    // Prepare the gradient brush
19    var gradient = context.CreateLinearGradient(0, 0, canvas.Width, 0);
20    gradient.AddColorStop(0, "magenta");
21    gradient.AddColorStop(0.5, "blue");
22    gradient.AddColorStop(1.0, "red");
23
24    // Assign brush to the content
25    context.FillStyle = gradient;
26    context.StrokeStyle = gradient;
27
28    // Write the Text
29    context.FillText("Hello World!", 10, 90, 500);
30
31    // Fill the Rectangle
32    context.FillRect(0, 95, 300, 20);
33    
34    // Create the PDF output device
35    using (var device = new Aspose.Html.Rendering.Pdf.PdfDevice("canvas.pdf"))
36    {
37        // Render HTML5 Canvas to PDF
38        document.RenderTo(device);
39    }
40}

view raw Examples-CSharp-AdvancedUsage-HTML5Canvas-ManipulateUsingCode.cs hosted with ❤ by GitHub

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

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

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

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

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

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