Використання 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# Canvas 2D API. Довідник 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 можуть впливати на зображення.