使用 .NET API 在 HTML Canvas 上绘图
Aspose.HTML for .NET
通过
ICanvasRenderingContext2D
接口提供 HTML Canvas 2D 上下文。创建 HTMLCanvasElement、请求其 "2d" 上下文、在 C# 中执行绘图命令，然后将包含 Canvas 的 HTMLDocument 渲染为 PDF 或其他支持的输出格式。
在 HTML Canvas 上绘图并渲染为 PDF
此示例创建 500 × 180 像素的 Canvas，在其范围内绘制渐变文本和矩形，然后将完成的 HTML 文档渲染到 canvas.pdf。
绘制 HTML Canvas 2D 的 C# 代码
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 的步骤
- 创建
HTMLDocument，并将HTMLCanvasElement添加到文档正文。 - 设置
Width和Height，以定义位图尺寸和坐标空间。 - 调用
GetContext("2d")，并将结果转换为ICanvasRenderingContext2D。 - 配置绘图样式，并调用
FillText()和FillRect()等方法。 - 创建
PdfDevice，并将其传给RenderTo()，以便将文档写入 PDF。
HTML Canvas 2D 功能和渲染注意事项
- 形状和路径。 使用 Canvas 2D 方法绘制填充或描边矩形、直线、曲线、圆弧和自定义路径。
- 文本和图片。 设置字体和绘图样式、渲染文本，并将支持的图片源放置到 Canvas 上。
- 颜色、渐变和图案。 将纯色、
ICanvasGradient对象或图案赋给FillStyle和StrokeStyle。 - 变换和合成。 执行平移、旋转、缩放和裁剪，控制不透明度，并选择新绘图操作与现有像素的组合方式。
- 位图尺寸非常重要。
Width和Height定义内部位图。仅缩放 CSS 尺寸可能拉伸位图并降低视觉清晰度。 - 渲染捕获当前状态。 请在调用
RenderTo()前完成绘图命令。需要其他支持的输出时，请使用PdfDevice、XpsDevice、DocDevice或ImageDevice。
Canvas 2D 和渲染文档
阅读 编辑 HTML5 Canvas ，了解两种支持的工作流程，即加载通过 JavaScript 绘图的 HTML，以及通过 C# Canvas 2D API 直接绘图。 ICanvasRenderingContext2D API 参考 列出了可用属性和绘图方法。当应用程序需要 PDF、XPS、DOCX 或图片输出以及设备特定选项时，请参阅 渲染设备 。
安装 Aspose.HTML for .NET
使用 .NET CLI 从 NuGet 安装 Aspose.HTML for .NET ：
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 能否渲染由 JavaScript 绘制的 Canvas？
可以。加载包含 <canvas> 元素及其脚本的 HTML 文档，等待脚本执行完毕，然后转换或渲染文档。不需要 JavaScript 时，可以通过 ICanvasRenderingContext2D 直接使用 C# 绘图。
4. 将 HTML Canvas 渲染为 PDF 会把绘图转换为可编辑的 HTML 或 SVG 矢量吗？
不会。Canvas 是位图绘图表面。渲染会在输出文档中保留其可见状态，但不会将绘图重建为可编辑的 HTML 元素或 SVG 路径。
5. 能否将 HTML Canvas 保存为图片而不是 PDF？
可以。通过为所需光栅输出配置的 ImageDevice 渲染包含 Canvas 的 HTMLDocument。Canvas 仍是页面布局的一部分，因此页面尺寸、边距和周围的 HTML 可能影响最终图片。