CanvasRenderingContext2D – C#

什么是 CanvasRenderingContext2D？

HTML <canvas> 元素是 HTML 页面中的位图区域。 Aspose.HTML for .NET 提供了 ICanvasRenderingContext2D 接口，用于在 HTML 画布上绘制矩形、文本、图像和其他对象。它为<canvas>元素的绘图表面提供 2D 渲染上下文。借助它，您可以绘制形状、线条、曲线、方框、文本和图像，使用颜色、旋转、变换和其他像素操作。

首先，确保您的项目中安装了 Aspose.HTML for .NET。 这个库的安装过程非常简单。 打开 NuGet 包管理器，搜索 Aspose.HTML，然后安装。 您还可以从包管理器控制台使用以下命令：

Install-Package Aspose.HTML

如何在 C# 中渲染 HTML Canvas

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. 使用 CreateElement() 方法创建一个<canvas>元素，并将其附加到 HTML 文档的正文中。设置<canvas>元素所需的属性，例如width、height和style。
3. 要使用 2d 画布上下文，您需要在 <canvas> 元素上调用 GetContext() 方法并使用 2d 作为参数。
4. 下一步是在 HTML 画布上绘图：
   • 使用 CreateRadialGradient() 方法创建径向渐变，在不同位置定义颜色停止点以创建平滑的颜色过渡。
   • 使用 FillText() 方法在画布上写入文本。使用 2D 渲染上下文的Font属性来设置文本渲染的字体设置。
   • 使用 FillRect() 方法用先前创建的径向渐变填充画布矩形。
5. 将 HTML5 Canvas 渲染为 PDF：
   • 使用 PdfDevice() 构造函数之一创建 PdfDevice 类的对象。
   • 调用 RenderTo(device) 方法。此方法将 PdfDevice 类的对象作为参数。

因此，这段 C# 代码创建了一个 PDF 文档，其中包含在画布上绘制的文本和径向渐变。生成的 PDF 文件将保存到指定的输出路径。

HTML渲染器

Aspose.Html.Rendering 命名空间提供了 HtmlRenderer 类，负责通过 IDevice 接口实现渲染 HTML 文档。渲染设备封装了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 以及如何使用 Aspose.HTML for .NET API 处理包含 HTML5 <canvas> 元素的文档。

在 微调转换器 一章中，Aspose.HTML for .NET 提供了渲染 HTML 文档的替代方法，这些方法可以让您更好地控制 C# 应用程序中的渲染过程。我们的 C# 库实现了一组渲染设备 – PdfDevice、XpsDevice、DocDevice 和 ImageDevice。每个都有其独特的选项集，分别通过类 PdfRenderingOptions、XpsRenderingOptions、DocRenderingOptions 和 ImageRenderingOptions 实现。