编辑 HTML5 画布 – С# 示例

什么是 HTML 画布？

HTML Canvas 元素是 HTML 文档中的一个 HTML5 元素，使用 <canvas> 标签添加。<canvas> 元素是图形的容器，您必须使用 JavaScript 来实际绘制图形——动态创建和操作图形。HTML5 Canvas 提供了一个 2D 绘图环境，可用于创建和编辑图形元素，例如线条、路径、形状、图像和文本。<canvas> 元素是 HTML5 的一部分，提供可编写脚本的 2D 形状和位图动态渲染。这是一个更新位图的低级过程模型。HTML5 Canvas 用于动态渲染图形、游戏图形、艺术作品或其他视觉图像，它位于 Aspose.HTML for .NET 库的内置格式列表中。

<canvas> 元素必须具备：

• id 属性，以便 JavaScript 可以引用它。
• 宽度 width，height属性来定义画布的大小。

HTML 画布元素还具有其他属性，您可以通过设置这些属性来配置其行为和外观。例如，如果要添加边框，可使用 style 属性。<canvas> 元素还支持 全局属性 和 HTML。

HTML5 画布 – 如何用 C# 进行编辑

要将画布作为 HTML 文档的一部分来呈现，您无需进行任何特殊操作，只需像通常一样呈现文档即可。以下代码片段演示了如何处理包含 HTML5 画布元素的文档：

// How to edit HTML5 Canvas and convert it to PDF using C#

// Prepare an output path
string outputPath = Path.Combine(OutputDir, "output.pdf");

// Prepare a document with HTML5 Canvas inside and save it to the file "document.html"
string code = @"
    <canvas id=myCanvas width='200' height='100' style='border:1px solid #d3d3d3;'></canvas>
    <script>
        var c = document.getElementById('myCanvas');
        var context = c.getContext('2d');
        context.font = '30px Arial';
        context.fillStyle = 'red';
        context.fillText('Hello, World', 40, 50);
    </script>";

System.IO.File.WriteAllText("document.html", code);

// Initialize an HTML document from the html file
using (HTMLDocument document = new HTMLDocument("document.html"))
{
    // Convert HTML to PDF
    Converter.ConvertHTML(document, new PdfSaveOptions(), outputPath);
}

在示例中，我们从头开始创建一个 HTML 文档。code 变量包含 HTML 内容，该内容生成一个嵌入 <canvas> 元素的文档，并使用 JavaScript 在画布上绘制Hello, World。让我们逐步分解 C# 代码：

1.编写包含 HTML5 画布的 HTML 代码，并使用 System.IO.File.WriteAllText() 方法将 HTML 代码写入名为 document.html 的文件。 2. 使用 HTMLDocument 类从文件中初始化 HTML 文档。 3. 调用 ConvertHTML(document, options, outputPath) 方法，使用默认保存选项将 HTML 转换为 PDF。

画布渲染语境 2D

除了将 HTML5 画布作为 HTML 文档的一部分进行处理外，您还可以直接在 C# 代码中使用画布。Aspose.HTML for .NET 为这些操作提供了 ICanvasRenderingContext2D 接口，该接口完全基于官方 标准，用于在 HTML 画布元素上绘制 2D 图形。它提供了一组方法和属性，允许开发人员在画布中创建和操作图形，如线条、形状、文本和图像。

CanvasRenderingContext2D 的主要功能

<canvas> 元素与 2D 渲染上下文相结合，允许开发者直接在网页内创建动态且可交互的视觉效果。以下是 CanvasRenderingContext2D 的一些关键方面：

1. 使用 FillRect() 和 StrokeRect() 等方法，你可以毫不费力地绘制形状。
2. CanvasRenderingContext2D 允许使用 FillText() 和 StrokeText() 等方法在画布上渲染文本，从而以不同的样式和字体动态显示文本。
3. 您可以通过设置 FillStyle 和 StrokeStyle 等属性来定制绘制元素的外观，并使用渐变、图案和纯色。
4. 您可以应用平移、旋转和缩放等变换，从而动态操控画布空间，方便复杂的图形排列。
5. CanvasRenderingContext2D 支持通过 DrawImage() 等方法在画布上绘制和操作图像，从而提高了将图形纳入用户界面的可能性。

将 HTML5 画布 2D 渲染成 PDF

以下代码片段展示了如何使用 HTML5 画布的绘制功能来呈现用渐变笔刷填充的自定义文本。

// How to render HTML5 Canvas 2D to PDF using C#

// Create an empty HTML document
using HTMLDocument document = new HTMLDocument();

// Create a <canvas> element
HTMLCanvasElement canvas = (HTMLCanvasElement)document.CreateElement("canvas");

// with a specified size
canvas.Width = 500;
canvas.Height = 150;

// and append it to the document body
document.Body.AppendChild(canvas);

// Get the canvas rendering context to draw
ICanvasRenderingContext2D context = (Html.Dom.Canvas.ICanvasRenderingContext2D)canvas.GetContext("2d");

// Prepare a gradient brush
ICanvasGradient gradient = context.CreateLinearGradient(0, 0, canvas.Width, 0);
gradient.AddColorStop(0, "magenta");
gradient.AddColorStop(0.4, "blue");
gradient.AddColorStop(0.9, "red");

// Assign the brush to the content
context.FillStyle = gradient;
context.StrokeStyle = gradient;

// Write the text
context.FillText("Hello, World!", 10, 90, 500);

// Fill the rectangle
context.FillRect(0, 95, 500, 100);

// Prepare an output path
string outputPath = Path.Combine(OutputDir, "canvas.pdf");

// Create the PDF output device
using (PdfDevice device = new PdfDevice(outputPath))
{
    // Render HTML5 Canvas to PDF
    document.RenderTo(device);
}

在上面的示例中，我们使用 RenderTo(device) 方法将 HTML 文档渲染为 PDF 格式。但您可以选择不同的渲染设备，将 HTML 文档转换成您需要的其他格式。将画布内容渲染为其他格式(如图像或 PDF)有助于确保在不同的浏览器中显示一致、可靠的内容，使用户更容易打印或共享视觉一致的文档，而且对于存档也很有价值。对于某些应用，将画布内容呈现为静态格式可以防止最终用户操纵或篡改动态视觉效果，从而提高安全性。

因此，将 HTML5 画布内容呈现为其他格式可提供灵活性，提高兼容性，并为在不同环境中共享、存档和整合动态图形提供各种可能性。格式的选择取决于网络应用的具体需求和目标。

要了解有关渲染过程的更多信息，请阅读 渲染设备 一文。

渲染选项可以让你对渲染过程进行额外的控制。要了解更多相关信息，请阅读 渲染选项 一文。

要了解有关如何使用 HTML5 画布的更多信息，您可以阅读广受欢迎的公众号 HTML 画布教程。