CanvasRenderingContext2D-C#

¿Qué es CanvasRenderingContext2D?

El elemento HTML <canvas> es un área de mapa de bits en una página HTML. Aspose.HTML for .NET proporciona la interfaz ICanvasRenderingContext2D que se utiliza para dibujar rectángulos, texto, imágenes y otros objetos en el lienzo HTML. Proporciona el contexto de representación 2D para la superficie de dibujo de un elemento <canvas>. Con su ayuda, puedes dibujar formas, líneas, curvas, cuadros, texto e imágenes, usar colores, rotaciones, transformaciones y otras manipulaciones de píxeles.

Primero, asegúrese de tener Aspose.HTML for .NET instalado en su proyecto. El proceso de instalación de esta biblioteca es bastante sencillo. Abra el administrador de paquetes NuGet, busque Aspose.HTML e instálelo. También puede utilizar el siguiente comando desde la Consola del Administrador de paquetes:

Install-Package Aspose.HTML

Cómo renderizar HTML Canvas en C#

El espacio de nombres Aspose.Html.Dom.Canvas proporciona un medio para dibujar gráficos a través del elemento HTML <canvas> y se centra principalmente en gráficos 2D. El siguiente fragmento de código C# muestra cómo utilizar la función de dibujo de HTML5 Canvas para representar gráficos 2D personalizados con texto y una forma rellena con el degradado 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);
    }

Guía paso a paso – CanvasRenderingContext2D

1. Utilice el constructor HTMLDocument() para inicializar un documento HTML. En el ejemplo, creamos HTML desde cero, pero también puedes cargar el documento desde un archivo o URL.
2. Cree un elemento <canvas> usando el método CreateElement() y agréguelo al cuerpo del documento HTML. Establezca los atributos requeridos para el elemento <canvas>, por ejemplo, width, height y style.
3. Para usar el contexto del lienzo 2d, debe llamar al método GetContext() en el elemento <canvas> y usar 2d como argumento.
4. El siguiente paso es el dibujo en lienzo HTML:
   • Se crea un degradado radial utilizando el método CreateRadialGradient() , definiendo paradas de color en diferentes posiciones para crear una transición suave de colores.
   • El texto se escribe en el lienzo usando el método FillText() . Utilice la propiedad Font del contexto de representación 2D para establecer la configuración de fuente para la representación de texto.
   • El rectángulo del lienzo se rellena con el degradado radial creado previamente utilizando el método FillRect() .
5. Renderizar lienzo HTML5 a PDF:
   • Utilice uno de los constructores PdfDevice() para crear un objeto de la clase PdfDevice.
   • Llame al método RenderTo(dispositivo) . Este método toma como parámetro el objeto de la clase PdfDevice.

Entonces, este código C# crea un documento PDF con texto y un degradado radial dibujado en el lienzo. El archivo PDF resultante se guarda en la ruta de salida especificada.

Representador HTML

El espacio de nombres Aspose.Html.Rendering ofrece la clase HtmlRenderer que es responsable de representar documentos HTML a través de la implementación de la interfaz IDevice. El dispositivo de renderizado encapsula una superficie de dibujo 2D. Actualmente, Aspose.HTML for .NET API proporciona las siguientes implementaciones: PdfDevice, XpsDevice, DocDevice e ImageDevice, que se utilizan para generar formatos de archivos PDF, XPS, DOCX e Image, respectivamente.

En el ejemplo que vimos arriba, un documento HTML se representó en formato PDF. Pero puedes elegir un dispositivo de renderizado diferente y convertir el documento a otro formato que necesites.

Aspose.HTML for .NET – Documentación

Aspose.HTML for .NET es una biblioteca de análisis HTML avanzada. Se pueden crear, editar, navegar a través de nodos, extraer datos, fusionar y convertir archivos HTML, XHTML, MD, EPUB y MHTML a PDF, DOCX, imágenes y otros formatos populares. Además, también maneja CSS, HTML Canvas, SVG, XPath y JavaScript listos para usar para ampliar las tareas de manipulación. Para obtener más detalles sobre la instalación de la biblioteca C# y los requisitos del sistema, consulte la Documentación Aspose.HTML .

En el artículo Editar HTML5 Canvas – Ejemplos de С# , aprenderá sobre HTML Canvas y cómo trabajar con un documento que contiene el elemento HTML5 <canvas> usando Aspose.HTML for .NET API.

En el capítulo Ajuste de convertidores , Aspose.HTML for .NET proporciona formas alternativas de renderizar documentos HTML que pueden brindarle más control sobre el proceso de renderizado en su aplicación C#. Nuestra biblioteca C# implementa un conjunto de dispositivos de renderizado: PdfDevice, XpsDevice, DocDevice e ImageDevice. Cada uno tiene su conjunto único de opciones implementadas con las clases PdfRenderingOptions, XpsRenderingOptions, DocRenderingOptions e ImageRenderingOptions, respectivamente.