C#에서 CanvasRenderingContext2D 사용하기

.NET API로 HTML Canvas에 그리기

Aspose.HTML for .NET 은 ICanvasRenderingContext2D 인터페이스를 통해 HTML Canvas 2D 컨텍스트를 제공합니다. HTMLCanvasElement를 만들고 "2d" 컨텍스트를 요청한 뒤 C#에서 그리기 명령을 실행하고, Canvas를 포함하는 HTMLDocument를 PDF 또는 다른 지원 형식으로 렌더링합니다.

HTML Canvas를 그리고 PDF로 렌더링하기

이 예제는 500 × 180픽셀 Canvas를 만들고 범위 안에 그라데이션 텍스트와 직사각형을 그린 뒤 완성된 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 를 문서 본문에 추가합니다.
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 편집 은 JavaScript로 그리는 HTML을 로드하는 방법과 C# Canvas 2D API로 직접 그리는 방법을 설명합니다. ICanvasRenderingContext2D API 참조 에는 사용 가능한 속성과 그리기 메서드가 나열되어 있습니다. PDF, XPS, DOCX 또는 이미지 출력과 장치별 옵션이 필요하면 렌더링 장치 를 참조하십시오.

Aspose.HTML for .NET 설치

.NET CLI를 사용하여 NuGet에서 Aspose.HTML for .NET 을 설치합니다.

dotnet add package Aspose.HTML

NuGet 패키지 관리자 UI를 사용하거나 패키지 관리자 콘솔에서 Install-Package Aspose.HTML을 실행할 수도 있습니다. 설정 방법은 설치 가이드 를 참조하세요. 평가 제한 없이 API를 테스트하려면 임시 라이선스 를 요청할 수 있습니다.

HTML Canvas 2D FAQ

1. 요소 HTMLCanvasElement와 ICanvasRenderingContext2D의 차이점은 무엇인가요?

요소 HTMLCanvasElement는 <canvas> 노드를 나타내고 비트맵 크기를 정의합니다. ICanvasRenderingContext2D는 GetContext("2d")가 반환하는 그리기 인터페이스이며 스타일, 경로, 텍스트, 이미지, 변환 및 픽셀 작업을 제공합니다.

2. HTML Canvas 출력이 흐리거나 늘어나 보이는 이유는 무엇인가요?

속성 Width와 Height는 내부 비트맵을 정의합니다. CSS가 크게 다른 크기로 표시하면 브라우저나 렌더러가 픽셀을 조정합니다. CSS 크기 조정에만 의존하지 말고 원하는 출력 크기에 맞게 비트맵 크기를 설정하십시오.

3. Aspose.HTML이 JavaScript로 그린 Canvas를 렌더링할 수 있나요?

예. <canvas> 요소와 스크립트가 포함된 HTML 문서를 로드하고 스크립트 실행이 끝난 뒤 문서를 변환하거나 렌더링합니다. JavaScript가 필요 없으면 ICanvasRenderingContext2D로 C#에서 직접 그릴 수 있습니다.

4. HTML Canvas를 PDF로 렌더링하면 편집 가능한 HTML 또는 SVG 벡터로 변환되나요?

아니요. Canvas는 비트맵 그리기 표면입니다. 렌더링은 출력 문서에 보이는 상태를 보존하지만 그림을 편집 가능한 HTML 요소나 SVG 경로로 재구성하지 않습니다.

5. HTML Canvas를 PDF 대신 이미지로 저장할 수 있나요?

예. Canvas를 포함하는 HTMLDocument를 필요한 래스터 출력에 맞게 구성한 ImageDevice로 렌더링합니다. Canvas는 페이지 레이아웃의 일부이므로 페이지 크기, 여백 및 주변 HTML이 이미지에 영향을 줄 수 있습니다.