ใช้ CanvasRenderingContext2D ใน C#

วาดบน HTML Canvas ด้วย .NET API

Aspose.HTML for .NET เปิดใช้บริบท HTML Canvas 2D ผ่านอินเทอร์เฟซ ICanvasRenderingContext2D สร้าง HTMLCanvasElement ขอรับบริบท "2d" เรียกคำสั่งวาดใน C# แล้วเรนเดอร์ HTMLDocument ที่มี Canvas เป็น PDF หรือรูปแบบเอาต์พุตอื่นที่รองรับ

วาด HTML Canvas และเรนเดอร์เป็น PDF

ตัวอย่างนี้สร้าง Canvas ขนาด 500 × 180 พิกเซล วาดข้อความไล่ระดับสีและสี่เหลี่ยมภายในขอบเขต แล้วเรนเดอร์เอกสาร 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 สำหรับสองเวิร์กโฟลว์ที่รองรับ ได้แก่ การโหลด HTML ที่วาดผ่าน JavaScript และการวาดโดยตรงผ่าน C# Canvas 2D API ข้อมูลอ้างอิง ICanvasRenderingContext2D API แสดงพร็อพเพอร์ตีและเมธอดวาดที่มีอยู่ ดู อุปกรณ์เรนเดอร์ เมื่อต้องการ PDF, XPS, DOCX หรือรูปภาพพร้อมตัวเลือกเฉพาะอุปกรณ์

ติดตั้ง Aspose.HTML for .NET

ติดตั้ง Aspose.HTML for .NET จาก NuGet ด้วย .NET CLI:

dotnet add package Aspose.HTML

คุณยังสามารถใช้หน้าต่าง NuGet Package Manager หรือเรียกใช้ Install-Package Aspose.HTML ใน Package Manager Console ได้ ดูรายละเอียดการตั้งค่าใน คู่มือการติดตั้ง หรือขอ ใบอนุญาตชั่วคราว เพื่อประเมิน API โดยไม่มีข้อจำกัดของเวอร์ชันทดลอง

คำถามที่พบบ่อยเกี่ยวกับ HTML Canvas 2D

1. องค์ประกอบ HTMLCanvasElement และ ICanvasRenderingContext2D ต่างกันอย่างไร?

องค์ประกอบ HTMLCanvasElement แทนโหนด <canvas> และกำหนดขนาดบิตแมป ส่วน ICanvasRenderingContext2D คืออินเทอร์เฟซวาดที่ GetContext("2d") ส่งกลับ ซึ่งมีการทำงานกับสไตล์ พาธ ข้อความ รูปภาพ การแปลง และพิกเซล

2. เหตุใดเอาต์พุต HTML Canvas จึงดูเบลอหรือยืด?

พร็อพเพอร์ตี Width และ Height กำหนดบิตแมปภายใน หาก CSS แสดงบิตแมปในขนาดที่ต่างกันมาก เบราว์เซอร์หรือตัวเรนเดอร์จะปรับขนาดพิกเซล กำหนดขนาดบิตแมปตามเอาต์พุตแทนการพึ่งพา CSS เพียงอย่างเดียว

3. Aspose.HTML เรนเดอร์ Canvas ที่วาดด้วย JavaScript ได้หรือไม่?

ได้ โหลดเอกสาร HTML ที่มีองค์ประกอบ <canvas> และสคริปต์ รอให้สคริปต์ทำงานเสร็จ แล้วแปลงหรือเรนเดอร์เอกสาร หากไม่ต้องใช้ JavaScript สามารถวาดจาก C# โดยตรงด้วย ICanvasRenderingContext2D

4. การเรนเดอร์ HTML Canvas เป็น PDF แปลงภาพวาดเป็นเวกเตอร์ HTML หรือ SVG ที่แก้ไขได้หรือไม่?

ไม่ Canvas เป็นพื้นผิววาดแบบบิตแมป การเรนเดอร์รักษาสถานะที่มองเห็นได้ในเอกสารเอาต์พุต แต่ไม่สร้างภาพวาดใหม่เป็นองค์ประกอบ HTML หรือพาธ SVG ที่แก้ไขได้

5. บันทึก HTML Canvas เป็นรูปภาพแทน PDF ได้หรือไม่?

ได้ เรนเดอร์ HTMLDocument ที่มี Canvas ผ่าน ImageDevice ซึ่งกำหนดค่าสำหรับเอาต์พุตราสเตอร์ที่ต้องการ Canvas ยังคงเป็นส่วนหนึ่งของเลย์เอาต์ ดังนั้นขนาดหน้า ระยะขอบ และ HTML รอบข้างอาจมีผลต่อรูปภาพ