KanvasRenderingContext2D – C#

Apa itu CanvasRenderingContext2D?

Elemen HTML <canvas> adalah area yang dipetakan dalam halaman HTML. Aspose.HTML for .NET menyediakan antarmuka ICanvasRenderingContext2D yang digunakan untuk menggambar persegi panjang, teks, gambar, dan objek lain ke kanvas HTML. Ini memberikan konteks rendering 2D untuk permukaan gambar elemen <canvas>. Dengan bantuannya, Anda dapat menggambar bentuk, garis, kurva, kotak, teks, dan gambar, menggunakan warna, rotasi, transformasi, dan manipulasi piksel lainnya.

Pertama, pastikan Anda telah Aspose.HTML for .NET terinstal di proyek Anda. Proses instalasi perpustakaan ini cukup sederhana. Buka manajer paket NuGet, cari Aspose.HTML, dan instal. Anda juga dapat menggunakan perintah berikut dari Package Manager Console:

Install-Package Aspose.HTML

Cara Merender Kanvas HTML di C#

Namespace Aspose.Html.Dom.Canvas menyediakan sarana untuk menggambar grafik melalui elemen HTML <canvas> dan sebagian besar berfokus pada grafik 2D. Cuplikan kode C# berikut menunjukkan cara menggunakan fitur menggambar Kanvas HTML5 untuk merender grafik 2d khusus dengan teks dan bentuk yang diisi dengan gradien radial:

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);
    }

Panduan Langkah demi Langkah – CanvasRenderingContext2D

1. Gunakan konstruktor HTMLDocument() untuk menginisialisasi dokumen HTML. Dalam contoh ini, kami membuat HTML dari awal, namun Anda juga dapat memuat dokumen dari file atau URL.
2. Buat elemen <canvas> menggunakan metode CreateElement(), dan tambahkan elemen tersebut ke badan dokumen HTML. Tetapkan atribut yang diperlukan untuk elemen <canvas>, misalnya width, height, dan style.
3. Untuk menggunakan konteks kanvas 2d, Anda perlu memanggil metode GetContext() pada elemen <canvas> dan menggunakan 2d sebagai argumen.
4. Langkah selanjutnya adalah menggambar pada kanvas HTML:
   • Gradien radial dibuat menggunakan metode CreateRadialGradient() , yang menentukan penghentian warna pada posisi berbeda untuk menciptakan transisi warna yang mulus.
   • Teks ditulis di kanvas menggunakan metode FillText() . Gunakan properti Font dari konteks rendering 2D untuk menyetel pengaturan font untuk rendering teks.
   • Persegi panjang kanvas diisi dengan gradien radial yang dibuat sebelumnya menggunakan metode FillRect() .
5. Render Kanvas HTML5 ke PDF:
   • Gunakan salah satu konstruktor PdfDevice() untuk membuat objek kelas PdfDevice.
   • Panggil metode RenderTo(perangkat) . Metode ini mengambil objek kelas PdfDevice sebagai parameter.

Jadi, kode C# ini membuat dokumen PDF dengan teks dan gradien radial yang digambar di kanvas. File PDF yang dihasilkan disimpan ke jalur keluaran yang ditentukan.

Perender HTML

Namespace Aspose.Html.Rendering menawarkan kelas HtmlRenderer yang bertanggung jawab untuk merender dokumen HTML melalui implementasi antarmuka IDevice. Perangkat rendering merangkum permukaan gambar 2D. Saat ini, Aspose.HTML for .NET API menyediakan implementasi berikut: PdfDevice, XpsDevice, DocDevice, dan ImageDevice, yang masing-masing digunakan untuk menghasilkan format file PDF, XPS, DOCX, dan Gambar.

Dalam contoh yang kita lihat di atas, dokumen HTML dirender dalam format PDF. Namun Anda dapat memilih perangkat rendering lain dan mengonversi dokumen ke format lain yang Anda perlukan.

Aspose.HTML for .NET – Dokumentasi

Aspose.HTML for .NET adalah pustaka penguraian HTML tingkat lanjut. Seseorang dapat membuat, mengedit, menavigasi node, mengekstrak data, menggabungkan dan mengonversi file HTML, XHTML, MD, EPUB, dan MHTML ke PDF, DOCX, Gambar, dan format populer lainnya. Selain itu, ia juga menangani CSS, HTML Canvas, SVG, XPath, dan JavaScript secara langsung untuk memperluas tugas manipulasi. Untuk detail lebih lanjut tentang instalasi perpustakaan C# dan persyaratan sistem, silakan merujuk ke Dokumentasi Aspose.HTML .

Dalam artikel Edit HTML5 Canvas – С# Contoh , Anda akan belajar tentang HTML Canvas dan cara bekerja dengan dokumen yang berisi elemen <canvas> HTML5 menggunakan Aspose.HTML for .NET API.

Dalam bab Penyempurnaan Pengonversi , Aspose.HTML for .NET menyediakan cara alternatif untuk merender dokumen HTML yang dapat memberi Anda kontrol lebih besar atas proses rendering dalam aplikasi C# Anda. Pustaka C# kami mengimplementasikan serangkaian perangkat rendering – PdfDevice, XpsDevice, DocDevice, dan ImageDevice. Masing-masing memiliki serangkaian opsi unik yang diimplementasikan dengan kelas PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions, dan ImageRenderingOptions.