C# で CanvasRenderingContext2D を使用

.NET API で HTML Canvas に描画

Aspose.HTML for .NET は、 ICanvasRenderingContext2D インターフェイスを通じて HTML Canvas 2D コンテキストを提供します。HTMLCanvasElement を作成して "2d" コンテキストを取得し、C# で描画コマンドを実行して、それを含む HTMLDocument を PDF または別の対応形式にレンダリングします。

HTML Canvas に描画して PDF にレンダリング

この例では 500 × 180 ピクセルの Canvas を作成し、その範囲内にグラデーションテキストと長方形を描画して、完成した 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 をドキュメントの body に追加します。
2. Width と Height を設定して、ビットマップの寸法と座標空間を定義します。
3. GetContext("2d") を呼び出し、結果を ICanvasRenderingContext2D にキャストします。
4. 描画スタイルを設定し、 FillText() や FillRect() などを呼び出します。
5. 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 パッケージ マネージャーの UI を使用するか、パッケージ マネージャー コンソールで 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 ではなく画像として保存できますか？

はい。Canvas を含む HTMLDocument を、必要なラスター出力用に設定した ImageDevice でレンダリングします。Canvas はページレイアウトの一部なので、ページサイズ、余白、周囲の HTML が画像に影響する場合があります。