CanvasRenderingContext2D – C#

Aspose.HTML을 사용하여 HTML5 Canvas 2D를 PDF로 렌더링

CanvasRenderingContext2D란 무엇입니까?

HTML <canvas> 요소는 HTML 페이지의 비트맵 영역입니다. .NET용 Aspose.HTML은 HTML 캔버스에 직사각형, 텍스트, 이미지 및 기타 개체를 그리는 데 사용되는 ICanvasRenderingContext2D 인터페이스를 제공합니다. <canvas> 요소의 그리기 표면에 대한 2D 렌더링 컨텍스트를 제공합니다. 도움을 받으면 모양, 선, 곡선, 상자, 텍스트 및 이미지를 그릴 수 있고 색상, 회전, 변형 및 기타 픽셀 조작을 사용할 수 있습니다.

먼저 프로젝트에 .NET용 Aspose.HTML이 설치되어 있는지 확인하세요. 이 라이브러리의 설치 과정은 매우 간단합니다. NuGet 패키지 관리자를 열고 Aspose.HTML을 검색하여 설치합니다. 패키지 관리자 콘솔에서 다음 명령을 사용할 수도 있습니다.

.NET용 Aspose.HTML 설치

Install-Package Aspose.HTML

C#에서 HTML 캔버스를 렌더링하는 방법

Aspose.Html.Dom.Canvas 네임스페이스는 HTML <canvas> 요소를 통해 그래픽을 그리는 수단을 제공하며 주로 2D 그래픽에 중점을 둡니다. 다음 C# 코드 조각은 HTML5 Canvas의 그리기 기능을 사용하여 방사형 그라데이션으로 채워진 텍스트와 모양으로 사용자 정의 2D 그래픽을 렌더링하는 방법을 보여줍니다.

캔버스를 렌더링하는 C# 코드

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

HTMLDocument() 생성자를 사용하여 HTML 문서를 초기화합니다. 예제에서는 처음부터 HTML을 생성하지만 파일이나 URL에서 문서를 로드할 수도 있습니다.
CreateElement() 메서드를 사용하여 <canvas> 요소를 생성하고 HTML 문서 본문에 추가합니다. <canvas> 요소에 필요한 속성(예: width, height, style)을 설정합니다.
2D 캔버스 컨텍스트를 사용하려면 <canvas> 요소에서 GetContext() 메서드를 호출하고 2d를 인수로 사용해야 합니다.
다음 단계는 HTML 캔버스에 그리는 것입니다.
- CreateRadialGradient() 메서드를 사용하여 방사형 그래디언트를 생성하고 다양한 위치에서 색상 정지점을 정의하여 색상의 부드러운 전환을 만듭니다.
- FillText() 메서드를 사용하여 캔버스에 텍스트를 작성합니다. 2D 렌더링 컨텍스트의 Font 속성을 사용하여 텍스트 렌더링에 대한 글꼴 설정을 지정합니다.
- 캔버스 직사각형은 FillRect() 메서드를 사용하여 이전에 생성된 방사형 그래디언트로 채워집니다.
HTML5 캔버스를 PDF로 렌더링:
- PdfDevice() 생성자 중 하나를 사용하여 PdfDevice 클래스의 개체를 만듭니다.
- RenderTo(device) 메서드를 호출합니다. 이 메서드는 PdfDevice 클래스의 개체를 매개 변수로 사용합니다.

따라서 이 C# 코드는 캔버스에 텍스트와 방사형 그라데이션이 그려진 PDF 문서를 만듭니다. 결과 PDF 파일은 지정된 출력 경로에 저장됩니다.

HTML 렌더러

Aspose.Html.Rendering 네임스페이스는 IDevice 인터페이스 구현을 통해 HTML 문서 렌더링을 담당하는 HtmlRenderer 클래스를 제공합니다. 렌더링 장치는 2D 드로잉 표면을 캡슐화합니다. 현재 .NET API용 Aspose.HTML은 각각 PDF, XPS, DOCX 및 이미지 파일 형식을 생성하는 데 사용되는 PdfDevice, XpsDevice, DocDevice 및 ImageDevice 구현을 제공합니다.

위에서 살펴본 예에서는 HTML 문서가 PDF 형식으로 렌더링되었습니다. 그러나 다른 렌더링 장치를 선택하고 문서를 필요한 다른 형식으로 변환할 수 있습니다.

.NET용 Aspose.HTML – 문서

.NET용 Aspose.HTML은 고급 HTML 구문 분석 라이브러리입니다. 노드를 생성, 편집, 탐색하고, 데이터를 추출하고, HTML, XHTML, MD, EPUB 및 MHTML 파일을 PDF, DOCX, 이미지 및 기타 널리 사용되는 형식으로 병합 및 변환할 수 있습니다. 또한 CSS, HTML Canvas, SVG, XPath 및 JavaScript를 즉시 처리하여 조작 작업을 확장합니다. C# 라이브러리 설치 및 시스템 요구 사항에 대한 자세한 내용은 Aspose.HTML 문서 를 참조하세요.

HTML5 Canvas 편집 – С# 예제 문서에서는 HTML Canvas에 대해 알아보고 .NET API용 Aspose.HTML을 사용하여 HTML5 <canvas> 요소가 포함된 문서로 작업하는 방법을 알아봅니다.

미세 조정 변환기 장에서 .NET용 Aspose.HTML은 C# 애플리케이션의 렌더링 프로세스를 더 효과적으로 제어할 수 있는 HTML 문서를 렌더링하는 대체 방법을 제공합니다. C# 라이브러리는 PdfDevice, XpsDevice, DocDevice 및 ImageDevice와 같은 렌더링 장치 세트를 구현합니다. 각각에는 PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions 및 ImageRenderingOptions 클래스로 구현된 고유한 옵션 세트가 있습니다.