Menggunakan CanvasRenderingContext2D di C#

Menggambar pada HTML Canvas dengan API .NET

Aspose.HTML for .NET menyediakan konteks HTML Canvas 2D melalui antarmuka ICanvasRenderingContext2D . Buat HTMLCanvasElement, minta konteks "2d", jalankan perintah gambar dalam C#, lalu render HTMLDocument yang memuat canvas ke PDF atau format output lain yang didukung.

Menggambar HTML Canvas dan Merendernya ke PDF

Contoh ini membuat canvas 500 × 180 piksel, menggambar teks gradien dan persegi panjang di dalam batasnya, lalu merender dokumen HTML yang selesai ke 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);

Langkah Menggambar dan Merender HTML Canvas

1. Buat HTMLDocument dan tambahkan HTMLCanvasElement ke body dokumen.
2. Tetapkan Width dan Height untuk menentukan dimensi bitmap dan ruang koordinat.
3. Panggil GetContext("2d") dan konversi hasilnya ke ICanvasRenderingContext2D.
4. Atur gaya gambar dan panggil metode seperti FillText() dan FillRect() .
5. Buat PdfDevice dan teruskan ke RenderTo() untuk menulis dokumen ke PDF.

Kemampuan HTML Canvas 2D dan Catatan Rendering

• Bentuk dan path. Gambar persegi panjang berisi atau bergaris, garis, kurva, busur, dan path khusus dengan metode Canvas 2D.
• Teks dan gambar. Atur font dan gaya gambar, render teks, dan tempatkan sumber gambar yang didukung pada canvas.
• Warna, gradien, dan pola. Tetapkan warna solid, objek ICanvasGradient, atau pola ke FillStyle dan StrokeStyle.
• Transformasi dan komposisi. Geser, putar, skalakan, potong, kontrol opasitas, dan pilih cara operasi baru digabungkan dengan piksel yang ada.
• Dimensi bitmap penting. Width dan Height menentukan bitmap dasar canvas. Hanya mengubah ukuran CSS dapat meregangkan bitmap dan mengurangi ketajaman.
• Rendering menangkap keadaan saat ini. Selesaikan perintah gambar sebelum memanggil RenderTo(). Gunakan PdfDevice, XpsDevice, DocDevice, atau ImageDevice untuk output lain yang didukung.

Dokumentasi Canvas 2D dan Rendering

Baca Mengedit HTML5 Canvas untuk dua alur yang didukung, yaitu memuat HTML yang menggambar melalui JavaScript dan menggambar langsung melalui API Canvas 2D C#. Referensi API ICanvasRenderingContext2D mencantumkan properti dan metode yang tersedia. Lihat Perangkat Rendering saat aplikasi memerlukan output PDF, XPS, DOCX, atau gambar dan opsi khusus perangkat.

Instal Aspose.HTML for .NET

Instal Aspose.HTML for .NET dari NuGet menggunakan .NET CLI:

dotnet add package Aspose.HTML

Anda juga dapat menggunakan antarmuka NuGet Package Manager atau menjalankan Install-Package Aspose.HTML di Package Manager Console. Lihat panduan instalasi untuk detail penyiapan, atau minta lisensi sementara untuk mengevaluasi API tanpa batasan evaluasi.

Tanya Jawab HTML Canvas 2D

1. Apa perbedaan antara HTMLCanvasElement dan ICanvasRenderingContext2D?

Elemen HTMLCanvasElement mewakili node <canvas> dan menentukan dimensi bitmap. ICanvasRenderingContext2D adalah antarmuka gambar dari GetContext("2d") yang menyediakan operasi gaya, path, teks, gambar, transformasi, dan piksel.

2. Mengapa output HTML Canvas dapat terlihat buram atau meregang?

Properti Width dan Height menentukan bitmap dasar. Jika CSS menampilkannya dalam dimensi yang jauh berbeda, browser atau renderer menskalakan piksel. Tetapkan dimensi bitmap untuk ukuran output yang diinginkan, bukan hanya mengandalkan penskalaan CSS.

3. Dapatkah Aspose.HTML merender Canvas yang digambar oleh JavaScript?

Ya. Muat dokumen HTML yang berisi elemen <canvas> dan skripnya, biarkan eksekusi skrip selesai, lalu konversi atau render dokumen. Menggambar langsung dalam C# melalui ICanvasRenderingContext2D tersedia saat JavaScript tidak diperlukan.

4. Apakah rendering HTML Canvas ke PDF mengubah gambar menjadi vektor HTML atau SVG yang dapat diedit?

Tidak. Canvas adalah permukaan gambar bitmap. Rendering mempertahankan keadaan visualnya dalam dokumen output, tetapi tidak membangun ulang gambar sebagai elemen HTML atau path SVG yang dapat diedit.

5. Dapatkah saya menyimpan HTML Canvas sebagai gambar, bukan PDF?

Ya. Render HTMLDocument yang memuat canvas melalui ImageDevice yang dikonfigurasi untuk output raster yang diperlukan. Canvas tetap menjadi bagian tata letak, sehingga ukuran halaman, margin, dan HTML di sekitarnya dapat memengaruhi gambar.