Usar CanvasRenderingContext2D em C#

Desenhar em HTML Canvas com uma API .NET

Aspose.HTML for .NET disponibiliza o contexto HTML Canvas 2D pela interface ICanvasRenderingContext2D . Crie um HTMLCanvasElement, solicite seu contexto "2d", execute comandos de desenho em C# e renderize o HTMLDocument que contém o canvas em PDF ou outro formato compatível.

Desenhar HTML Canvas e renderizá-lo em PDF

Este exemplo cria um canvas de 500 × 180 pixels, desenha texto em gradiente e um retângulo dentro de seus limites e renderiza o documento HTML concluído em 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);

Etapas para desenhar e renderizar HTML Canvas

1. Crie um HTMLDocument e adicione um HTMLCanvasElement ao corpo do documento.
2. Defina Width e Height para estabelecer as dimensões do bitmap e o espaço de coordenadas.
3. Chame GetContext("2d") e converta o resultado em ICanvasRenderingContext2D.
4. Configure estilos e chame métodos como FillText() e FillRect() .
5. Crie um PdfDevice e passe-o a RenderTo() para gravar o documento em PDF.

Recursos do HTML Canvas 2D e notas de renderização

• Formas e caminhos. Desenhe retângulos preenchidos ou contornados, linhas, curvas, arcos e caminhos personalizados com métodos Canvas 2D.
• Texto e imagens. Defina fontes e estilos, renderize texto e posicione fontes de imagem compatíveis no canvas.
• Cores, gradientes e padrões. Atribua cores sólidas, objetos ICanvasGradient ou padrões a FillStyle e StrokeStyle.
• Transformações e composição. Translade, gire, dimensione e recorte, controle a opacidade e selecione como novas operações combinam com pixels existentes.
• As dimensões do bitmap importam. Width e Height definem o bitmap interno. Alterar apenas o tamanho CSS pode esticar o bitmap e reduzir a nitidez.
• A renderização captura o estado atual. Conclua os comandos antes de chamar RenderTo(). Use PdfDevice, XpsDevice, DocDevice ou ImageDevice para outra saída compatível.

Documentação de Canvas 2D e renderização

Leia Editar HTML5 Canvas para conhecer os dois fluxos compatíveis, carregar HTML que desenha via JavaScript e desenhar diretamente com a API Canvas 2D em C#. A referência da API ICanvasRenderingContext2D lista propriedades e métodos disponíveis. Consulte Dispositivos de renderização quando precisar de saída PDF, XPS, DOCX ou imagem com opções específicas.

Instalar o Aspose.HTML for .NET

Instale o Aspose.HTML for .NET pelo NuGet usando a CLI do .NET:

dotnet add package Aspose.HTML

Você também pode usar a interface do Gerenciador de Pacotes NuGet ou executar Install-Package Aspose.HTML no Console do Gerenciador de Pacotes. Consulte o guia de instalação para configurar a biblioteca ou solicite uma licença temporária para avaliar a API sem limitações.

Perguntas frequentes sobre HTML Canvas 2D

1. Qual é a diferença entre HTMLCanvasElement e ICanvasRenderingContext2D?

O elemento HTMLCanvasElement representa o nó <canvas> e define as dimensões de seu bitmap. ICanvasRenderingContext2D é a interface retornada por GetContext("2d") que oferece operações de estilos, caminhos, texto, imagens, transformações e pixels.

2. Por que a saída de HTML Canvas pode parecer desfocada ou esticada?

As propriedades Width e Height definem o bitmap interno. Se o CSS o exibir em dimensões muito diferentes, o navegador ou renderizador dimensionará os pixels. Defina as dimensões do bitmap para o tamanho final, em vez de depender apenas do CSS.

3. Aspose.HTML pode renderizar um Canvas desenhado por JavaScript?

Sim. Carregue um documento HTML com o elemento <canvas> e seu script, aguarde a conclusão da execução e converta ou renderize o documento. O desenho direto em C# com ICanvasRenderingContext2D está disponível quando JavaScript não é necessário.

4. Renderizar HTML Canvas em PDF converte o desenho em vetores HTML ou SVG editáveis?

Não. Canvas é uma superfície de desenho bitmap. A renderização preserva seu estado visível no documento de saída, mas não reconstrói o desenho como elementos HTML ou caminhos SVG editáveis.

5. Posso salvar HTML Canvas como imagem em vez de PDF?

Sim. Renderize o HTMLDocument que contém o canvas por um ImageDevice configurado para a saída raster necessária. O canvas permanece no layout, portanto tamanho da página, margens e HTML ao redor podem afetar a imagem.