CanvasRenderingContext2D – C#

CanvasRenderingContext2D คืออะไร

องค์ประกอบ HTML <canvas> เป็นพื้นที่บิตแมปในหน้า HTML Aspose.HTML for .NET มีอินเทอร์เฟซ ICanvasRenderingContext2D ที่ใช้สำหรับการวาดรูปสี่เหลี่ยม ข้อความ รูปภาพ และวัตถุอื่นๆ ลงบนผืนผ้าใบ HTML โดยให้บริบทการเรนเดอร์ 2D สำหรับพื้นผิวการวาดภาพขององค์ประกอบ <canvas> ด้วยความช่วยเหลือนี้ คุณสามารถวาดรูปร่าง เส้น เส้นโค้ง กล่อง ข้อความ และรูปภาพ ใช้สี การหมุน การแปลง และการปรับแต่งพิกเซลอื่นๆ

ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณได้ Aspose.HTML for .NET ติดตั้ง ในโปรเจ็กต์ของคุณ กระบวนการติดตั้งไลบรารีนี้ค่อนข้างง่าย เปิดตัวจัดการแพ็คเกจ NuGet ค้นหา Aspose.HTML และติดตั้ง คุณยังอาจใช้คำสั่งต่อไปนี้จาก Package Manager Console:

Install-Package Aspose.HTML

วิธีเรนเดอร์ HTML Canvas ใน C#

เนมสเปซ Aspose.Html.Dom.Canvas เป็นวิธีในการวาดภาพกราฟิกผ่านองค์ประกอบ <canvas> ของ HTML และเน้นที่กราฟิก 2D เป็นส่วนใหญ่ ข้อมูลโค้ด C# ต่อไปนี้แสดงวิธีใช้คุณลักษณะการวาดภาพของ HTML5 Canvas เพื่อเรนเดอร์กราฟิก 2 มิติที่กำหนดเองพร้อมข้อความและรูปร่างที่เต็มไปด้วยการไล่ระดับสีแบบรัศมี:

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

1. ใช้ตัวสร้าง HTMLDocument() เพื่อเริ่มต้นเอกสาร HTML ในตัวอย่าง เราสร้าง HTML ตั้งแต่เริ่มต้น แต่คุณสามารถโหลดเอกสารจากไฟล์หรือ URL ได้เช่นกัน
2. สร้างองค์ประกอบ <canvas> โดยใช้เมธอด CreateElement() และผนวกเข้ากับเนื้อหาของเอกสาร HTML ตั้งค่าแอตทริบิวต์ที่จำเป็นสำหรับองค์ประกอบ <canvas> เช่น width, height และ style
3. หากต้องการใช้บริบท 2d canvas คุณต้องเรียกใช้เมธอด GetContext() ในองค์ประกอบ <canvas> และใช้ 2d เป็นอาร์กิวเมนต์
4. ขั้นตอนต่อไปคือการวาดภาพบนผืนผ้าใบ HTML:
   • การไล่ระดับสีแบบรัศมีถูกสร้างขึ้นโดยใช้วิธี CreateRadialGradient() โดยกำหนดการหยุดสีที่ตำแหน่งต่างๆ เพื่อสร้างการเปลี่ยนสีที่ราบรื่น
   • ข้อความถูกเขียนบนผืนผ้าใบโดยใช้วิธี FillText() ใช้คุณสมบัติ Font ของบริบทการเรนเดอร์ 2D เพื่อตั้งค่าแบบอักษรสำหรับการแสดงข้อความ
   • สี่เหลี่ยมผืนผ้าใบถูกเติมด้วยการไล่ระดับสีแบบรัศมีที่สร้างขึ้นก่อนหน้านี้โดยใช้วิธี FillRect()
5. เรนเดอร์ HTML5 Canvas เป็น PDF:
   • ใช้หนึ่งในคอนสตรัคเตอร์ PdfDevice() เพื่อสร้างอ็อบเจ็กต์ของคลาส PdfDevice
   • เรียกวิธี RenderTo(device) วิธีการนี้ใช้วัตถุของคลาส PdfDevice เป็นพารามิเตอร์

ดังนั้นโค้ด C# นี้จะสร้างเอกสาร PDF พร้อมข้อความและการไล่ระดับสีแบบรัศมีที่วาดบนผืนผ้าใบ ไฟล์ PDF ที่ได้จะถูกบันทึกไปยังเส้นทางเอาต์พุตที่ระบุ

โปรแกรมเรนเดอร์ HTML

เนมสเปซ Aspose.Html.Rendering นำเสนอคลาส HtmlRenderer ที่รับผิดชอบในการแสดงเอกสาร HTML ผ่านการใช้งานอินเทอร์เฟซ IDevice อุปกรณ์เรนเดอร์จะห่อหุ้มพื้นผิวการวาดภาพ 2 มิติ ปัจจุบัน 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 และวิธีการทำงานกับเอกสารที่มีองค์ประกอบ <canvas> HTML5 โดยใช้ Aspose.HTML for .NET API

ในบท ตัวแปลงการปรับแต่งแบบละเอียด Aspose.HTML for .NET ให้ทางเลือกอื่นในการเรนเดอร์เอกสาร HTML ที่ให้คุณควบคุมกระบวนการเรนเดอร์ในแอปพลิเคชัน C# ของคุณได้มากขึ้น ไลบรารี C# ของเราใช้ชุดอุปกรณ์เรนเดอร์ – PdfDevice, XpsDevice, DocDevice และ ImageDevice แต่ละตัวเลือกมีชุดตัวเลือกเฉพาะที่นำไปใช้กับคลาส PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions และ ImageRenderingOptions ตามลำดับ