Editar lienzo HTML5 – С# Ejemplos

¿Qué es HTML Canvas?

El elemento HTML Canvas es un elemento HTML5 en un documento HTML que se agrega usando la etiqueta <canvas>. El elemento <canvas> es un contenedor para gráficos, y debes usar JavaScript para dibujar los gráficos: crear y manipular gráficos dinámicamente. HTML5 Canvas proporciona un contexto de dibujo 2D que se puede utilizar para crear y editar elementos gráficos como líneas, trazados, formas, imágenes y texto. El elemento <canvas> es parte de HTML5 y proporciona representación dinámica programable de formas 2D y mapas de bits. Este es un modelo de procedimiento de bajo nivel que actualiza un mapa de bits. HTML5 Canvas, que se utiliza para representar gráficos, gráficos de juegos, arte u otras imágenes visuales sobre la marcha, se encuentra en la lista de formatos integrados de la biblioteca Aspose.HTML for .NET.

El elemento <canvas> debe tener:

• Atributo id para que JavaScript pueda hacer referencia a él.
• Atributos ancho y alto para definir el tamaño del lienzo.

El elemento HTML Canvas también tiene otros atributos que puede establecer para configurar su comportamiento y apariencia. Por ejemplo, si desea agregar un borde, use un atributo de style. El elemento <canvas> también admite los Atributos globales y en HTML.

Lienzo HTML5: cómo editar en C#

Para representar el lienzo como parte de un documento HTML, no necesita ninguna manipulación particular, simplemente renderice el documento como lo hace habitualmente. El siguiente fragmento de código demuestra cómo trabajar con un documento que contiene un elemento HTML5 Canvas:

// Prepare an output path
string outputPath = Path.Combine(OutputDir, "output.pdf");

// Prepare a document with HTML5 Canvas inside and save it to the file "document.html"
var code = @"
    <canvas id=myCanvas width='200' height='100' style='border:1px solid #d3d3d3;'></canvas>
    <script>
        var c = document.getElementById('myCanvas');
        var context = c.getContext('2d');
        context.font = '30px Arial';
        context.fillStyle = 'red';
        context.fillText('Hello, World', 40, 50);
    </script>";

System.IO.File.WriteAllText("document.html", code);

// Initialize an HTML document from the html file
using (var document = new HTMLDocument("document.html"))
{
    // Convert HTML to PDF
    Converter.ConvertHTML(document, new PdfSaveOptions(), outputPath);
}

En el ejemplo, creamos un documento HTML desde cero. La variable code contiene contenido HTML que genera un documento con un elemento <canvas> incrustado y utiliza JavaScript para dibujar “Hello, World” en el lienzo. Analicemos el código C# paso a paso:

1. Prepare un código HTML con HTML5 Canvas dentro y use el método System.IO.File.WriteAllText() para escribir el código HTML en un archivo llamado document.html.
2. Inicialice un documento HTML a partir del archivo utilizando la clase HTMLDocument.
3. Llame al método ConvertHTML(document, options, outputPath) para convertir HTML a PDF con las opciones de guardado predeterminadas.

Canvas Rendering Context 2D

Además de procesar HTML5 Canvas como parte de un documento HTML, puede trabajar con Canvas directamente dentro de su código C#. Aspose.HTML for .NET proporciona una interfaz ICanvasRenderingContext2D para estas operaciones, que se basa completamente en el standard oficial y se utiliza para dibujar gráficos 2D en un elemento de lienzo en HTML. Proporciona un conjunto de métodos y propiedades que permiten a los desarrolladores crear y manipular gráficos, como líneas, formas, texto e imágenes, dentro del lienzo.

Características clave de CanvasRenderingContext2D

El elemento <canvas>, combinado con el contexto de renderizado 2D, permite a los desarrolladores crear imágenes dinámicas e interactivas directamente dentro de una página web. Estos son algunos aspectos clave de CanvasRenderingContext2D:

1. Con métodos como FillRect() y StrokeRect() puedes dibujar formas sin esfuerzo.
2. CanvasRenderingContext2D facilita la representación de texto en el lienzo utilizando métodos como FillText() y StrokeText(), lo que permite la visualización dinámica de texto con diferentes estilos y fuentes.
3. Puede personalizar la apariencia de los elementos dibujados estableciendo propiedades como FillStyle y StrokeStyle, permitiendo el uso de degradados, patrones y colores sólidos.
4. Puede aplicar transformaciones como traslación, rotación y escala, que pueden manipular dinámicamente el espacio del lienzo, facilitando disposiciones gráficas complejas.
5. CanvasRenderingContext2D admite dibujar y manipular imágenes en el lienzo mediante métodos como DrawImage(), lo que mejora el potencial para incorporar gráficos en la interfaz de usuario.

Renderizar HTML5 Canvas 2D a PDF

El siguiente fragmento de código muestra cómo utilizar la función de dibujo de HTML5 Canvas para representar un texto personalizado rellenado con el pincel de degradado.

    // Create an empty HTML document
    using var document = new HTMLDocument();
    
    // Create a <canvas> element
    var canvas = (HTMLCanvasElement)document.CreateElement("canvas");

    // with a specified size
    canvas.Width = 500;
    canvas.Height = 150;

    // and append it to the document body
    document.Body.AppendChild(canvas);

    // Get the canvas rendering context to draw
    var context = (Html.Dom.Canvas.ICanvasRenderingContext2D)canvas.GetContext("2d");

    // Prepare a gradient brush
    var gradient = context.CreateLinearGradient(0, 0, canvas.Width, 0);
    gradient.AddColorStop(0, "magenta");
    gradient.AddColorStop(0.4, "blue");
    gradient.AddColorStop(0.9, "red");

    // Assign the brush to the content
    context.FillStyle = gradient;
    context.StrokeStyle = gradient;

    // Write the text
    context.FillText("Hello, World!", 10, 90, 500);

    // Fill the rectangle
    context.FillRect(0, 95, 500, 100);

    // Prepare an output path
    string outputPath = Path.Combine(OutputDir, "canvas.pdf");

    // Create the PDF output device
    using (var device = new PdfDevice(outputPath))
    {
        // Render HTML5 Canvas to PDF
        document.RenderTo(device);
    }
}

En el ejemplo que vimos arriba, un documento HTML se representó en formato PDF usando el método RenderTo(device). Pero puedes elegir un dispositivo de renderizado diferente y convertir el documento HTML a otro formato que necesites. Representar el contenido del lienzo en otros formatos, como imágenes o archivos PDF, puede ayudar a garantizar una visualización consistente y confiable en diferentes navegadores, facilitar a los usuarios imprimir o compartir documentos visualmente consistentes y puede ser valioso para fines de archivado. Para algunas aplicaciones, representar el contenido del lienzo en un formato estático puede mejorar la seguridad al evitar que los usuarios finales manipulen o alteren los elementos visuales dinámicos.

Por lo tanto, representar contenido de lienzo HTML5 en otros formatos proporciona flexibilidad, mejora la compatibilidad y abre varias posibilidades para compartir, archivar e integrar gráficos dinámicos en diferentes contextos. La elección del formato depende de las necesidades y objetivos específicos de la aplicación web.

Para obtener más información sobre el proceso de renderizado, lea el artículo Dispositivo de renderizado.

Las opciones de renderizado le brindan control adicional sobre el proceso de renderizado. Para obtener más información sobre ellos, lea el artículo Opciones de renderizado.

Para obtener más información sobre cómo utilizar HTML5 Canvas, puede leer el popular Tutorial HTML Canvas.