CanvasRenderingContext2D – C#

O que é CanvasRenderingContext2D?

O elemento HTML <canvas> é uma área bitmap em uma página HTML. Aspose.HTML for .NET fornece a interface ICanvasRenderingContext2D que é usada para desenhar retângulos, texto, imagens e outros objetos na tela HTML. Ele fornece o contexto de renderização 2D para a superfície de desenho de um elemento <canvas>. Com sua ajuda, você pode desenhar formas, linhas, curvas, caixas, texto e imagens, usar cores, rotações, transformações e outras manipulações de pixels.

Primeiro, certifique-se de ter Aspose.HTML for .NET instalado em seu projeto. O processo de instalação desta biblioteca é bastante simples. Abra o gerenciador de pacotes NuGet, procure Aspose.HTML e instale. Você também pode usar o seguinte comando do Console do Gerenciador de Pacotes:

Install-Package Aspose.HTML

Como renderizar HTML Canvas em C#

O namespace Aspose.Html.Dom.Canvas fornece um meio para desenhar gráficos através do elemento HTML <canvas> e se concentra principalmente em gráficos 2D. O seguinte trecho de código C# mostra como usar o recurso de desenho do HTML5 Canvas para renderizar gráficos 2D personalizados com texto e uma forma preenchida com o gradiente radial:

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);
    }

Guia passo a passo – CanvasRenderingContext2D

1. Use o construtor HTMLDocument() para inicializar um documento HTML. No exemplo, criamos HTML do zero, mas você também pode carregar o documento a partir de um arquivo ou URL.
2. Crie um elemento <canvas> usando o método CreateElement() e anexe-o ao corpo do documento HTML. Defina os atributos necessários para o elemento <canvas>, por exemplo, width, height e style.
3. Para usar o contexto de tela 2d, você precisa chamar o método GetContext() no elemento <canvas> e usar 2d como argumento.
4. O próximo passo é o desenho na tela HTML:
   • Um gradiente radial é criado usando o método CreateRadialGradient() , definindo paradas de cores em diferentes posições para criar uma transição suave de cores.
   • O texto é escrito na tela usando o método FillText() . Use a propriedade Font do contexto de renderização 2D para definir as configurações de fonte para renderização de texto.
   • O retângulo da tela é preenchido com o gradiente radial criado anteriormente usando o método FillRect() .
5. Renderize HTML5 Canvas em PDF:
   • Use um dos construtores PdfDevice() para criar um objeto da classe PdfDevice.
   • Chame o método RenderTo(device) . Este método toma o objeto da classe PdfDevice como parâmetro.

Portanto, este código C# cria um documento PDF com texto e um gradiente radial desenhado na tela. O arquivo PDF resultante é salvo no caminho de saída especificado.

Renderizador HTML

O namespace Aspose.Html.Rendering oferece a classe HtmlRenderer que é responsável por renderizar documentos HTML por meio da implementação da interface IDevice. O dispositivo de renderização encapsula uma superfície de desenho 2D. Atualmente, a API Aspose.HTML for .NET fornece as seguintes implementações: PdfDevice, XpsDevice, DocDevice e ImageDevice, que são usadas para gerar formatos de arquivo PDF, XPS, DOCX e imagem, respectivamente.

No exemplo que vimos acima, um documento HTML foi renderizado em formato PDF. Mas você pode escolher um dispositivo de renderização diferente e converter o documento para outro formato necessário.

Aspose.HTML for .NET – Documentação

Aspose.HTML for .NET é uma biblioteca avançada de análise de HTML. É possível criar, editar, navegar pelos nós, extrair dados, mesclar e converter arquivos HTML, XHTML, MD, EPUB e MHTML em PDF, DOCX, imagens e outros formatos populares. Além disso, ele também lida com CSS, HTML Canvas, SVG, XPath e JavaScript prontos para uso para estender as tarefas de manipulação. Para obter mais detalhes sobre a instalação da biblioteca C# e requisitos do sistema, consulte Documentação Aspose.HTML .

No artigo Editar HTML5 Canvas – С# Exemplos , você aprenderá sobre HTML Canvas e como trabalhar com um documento que contém o elemento HTML5 <canvas> usando Aspose.HTML for .NET API.

No capítulo Conversores de ajuste fino , Aspose.HTML for .NET fornece maneiras alternativas de renderizar documentos HTML que podem fornecer mais controle sobre o processo de renderização em seu aplicativo C#. Nossa biblioteca C# implementa um conjunto de dispositivos de renderização – PdfDevice, XpsDevice, DocDevice e ImageDevice. Cada um tem seu conjunto exclusivo de opções implementadas com classes PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions e ImageRenderingOptions, respectivamente.