CanvasRenderingContext2D – C#

Aspose.HTML を使用して HTML5 Canvas 2D を PDF にレンダリングする

CanvasRenderingContext2D とは何ですか?

HTML <canvas> 要素は、HTML ページ内のビットマップ領域です。 Aspose.HTML for .NET は、HTML キャンバス上に四角形、テキスト、画像、その他のオブジェクトを描画するために使用される ICanvasRenderingContext2D インターフェイスを提供します。これは、<canvas> 要素の描画面に 2D レンダリングコンテキストを提供します。これを利用すると、図形、線、曲線、ボックス、テキスト、画像を描画したり、色、回転、変換、その他のピクセル操作を使用したりできます。

まず、プロジェクトに Aspose.HTML for .NET がインストールされていることを確認してください。このライブラリのインストールプロセスは非常に簡単です。 NuGet パッケージマネージャーを開き、Aspose.HTML を検索してインストールします。パッケージマネージャーコンソールから次のコマンドを使用することもできます。

Aspose.HTML for .NET をインストールする

Install-Package Aspose.HTML

C# で HTML キャンバスをレンダリングする方法

Aspose.Html.Dom.Canvas 名前空間は、HTML <canvas> 要素を介してグラフィックスを描画する手段を提供し、主に 2D グラフィックスに焦点を当てています。次の C# コードスニペットは、HTML5 Canvas の描画機能を使用して、テキストと放射状のグラデーションで塗りつぶされた形状を含むカスタム 2D グラフィックスをレンダリングする方法を示しています。

キャンバスをレンダリングするための C# コード

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

HTMLDocument() コンストラクターを使用して HTML ドキュメントを初期化します。この例では HTML を最初から作成しますが、ファイルまたは URL からドキュメントをロードすることもできます。
CreateElement() メソッドを使用して <canvas> 要素を作成し、それを HTML ドキュメントの本文に追加します。 <canvas> 要素に必要な属性 (たとえば、width、height、style) を設定します。
2D キャンバスコンテキストを使用するには、<canvas> 要素で GetContext() メソッドを呼び出し、引数として 2d を使用する必要があります。
次のステップは、HTML キャンバス上での描画です。
- 放射状グラデーションは、 CreateRadialGradient() メソッドを使用して作成され、さまざまな位置でカラーストップを定義して、色の滑らかな遷移を作成します。
- FillText() メソッドを使用して、キャンバス上にテキストを書き込みます。 2D レンダリングコンテキストの Font プロパティを使用して、テキストレンダリングのフォント設定を設定します。
- キャンバスの四角形は、 FillRect() メソッドを使用して、以前に作成した放射状のグラデーションで塗りつぶされます。
HTML5 キャンバスを PDF にレンダリングします。
- PdfDevice() コンストラクターのいずれかを使用して、PdfDevice クラスのオブジェクトを作成します。
- RenderTo(device) メソッドを呼び出します。このメソッドは、PdfDevice クラスのオブジェクトをパラメータとして受け取ります。

したがって、この C# コードは、キャンバス上にテキストと放射状のグラデーションが描かれた PDF ドキュメントを作成します。結果の PDF ファイルは、指定された出力パスに保存されます。

HTMLレンダラー

Aspose.Html.Rendering 名前空間は、IDevice インターフェイス実装を通じて HTML ドキュメントのレンダリングを担当する HtmlRenderer クラスを提供します。レンダリングデバイスは 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> 要素を含むドキュメントを操作する方法について学びます。

Fine-Tuning Converters の章では、Aspose.HTML for .NET が、C# アプリケーションでのレンダリングプロセスをより詳細に制御できる HTML ドキュメントをレンダリングするための代替方法を提供します。 C# ライブラリは、一連のレンダリングデバイス (PdfDevice、XpsDevice、DocDevice、ImageDevice) を実装します。それぞれには、クラス PdfRenderingOptions、XpsRenderingOptions、DocRenderingOptions、および ImageRenderingOptions で実装された独自のオプションセットがあります。