Usar CanvasRenderingContext2D en C#

Dibujar en HTML Canvas con una API .NET

Aspose.HTML for .NET ofrece el contexto HTML Canvas 2D mediante la interfaz ICanvasRenderingContext2D . Cree un HTMLCanvasElement, solicite su contexto "2d", ejecute comandos de dibujo en C# y renderice el HTMLDocument que contiene el lienzo como PDF u otro formato compatible.

Dibujar en HTML Canvas y renderizarlo como PDF

Este ejemplo crea un lienzo de 500 × 180 píxeles, dibuja texto con degradado y un rectángulo dentro de sus límites, y renderiza el documento HTML terminado como 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);

Pasos para dibujar y renderizar HTML Canvas

1. Cree un HTMLDocument y añada un HTMLCanvasElement a su cuerpo.
2. Defina Width y Height para establecer las dimensiones del mapa de bits y el espacio de coordenadas.
3. Llame a GetContext("2d") y convierta el resultado a ICanvasRenderingContext2D.
4. Configure los estilos y llame a métodos como FillText() y FillRect() .
5. Cree un PdfDevice y páselo a RenderTo() para escribir el documento como PDF.

Funciones de HTML Canvas 2D y notas de renderizado

• Formas y trazados. Dibuje rectángulos rellenos o con contorno, líneas, curvas, arcos y trazados personalizados con los métodos Canvas 2D.
• Texto e imágenes. Configure fuentes y estilos, renderice texto y coloque fuentes de imagen compatibles en el lienzo.
• Colores, degradados y patrones. Asigne colores sólidos, objetos ICanvasGradient o patrones a FillStyle y StrokeStyle.
• Transformaciones y composición. Traslade, gire, escale y recorte; controle la opacidad y seleccione cómo se combinan las nuevas operaciones con los píxeles existentes.
• Las dimensiones del mapa de bits importan. Width y Height definen el mapa de bits interno. Escalar solo el tamaño CSS puede estirar los píxeles y reducir la nitidez.
• El renderizado captura el estado actual. Complete los comandos antes de llamar a RenderTo(). Use PdfDevice, XpsDevice, DocDevice o ImageDevice para otra salida compatible.

Documentación sobre Canvas 2D y renderizado

Consulte Editar HTML5 Canvas para conocer los dos flujos compatibles: cargar HTML que dibuja mediante JavaScript y dibujar directamente con la API Canvas 2D de C#. La referencia de ICanvasRenderingContext2D enumera las propiedades y los métodos disponibles. Consulte Dispositivos de renderizado cuando necesite salida PDF, XPS, DOCX o de imagen con opciones específicas.

Instalar Aspose.HTML for .NET

Instale Aspose.HTML for .NET desde NuGet con la CLI de .NET:

dotnet add package Aspose.HTML

También puede usar la interfaz del Administrador de paquetes NuGet o ejecutar Install-Package Aspose.HTML en la consola del Administrador de paquetes. Consulte la guía de instalación para configurar la biblioteca o solicite una licencia temporal para evaluar la API sin limitaciones.

Preguntas frecuentes sobre HTML Canvas 2D

1. ¿En qué se diferencian HTMLCanvasElement e ICanvasRenderingContext2D?

El elemento HTMLCanvasElement representa el nodo <canvas> y define las dimensiones de su mapa de bits. ICanvasRenderingContext2D es la interfaz de dibujo devuelta por GetContext("2d") y proporciona operaciones de estilos, trazados, texto, imágenes, transformaciones y píxeles.

2. ¿Por qué la salida de HTML Canvas puede verse borrosa o estirada?

Las propiedades Width y Height definen el mapa de bits interno. Si CSS lo muestra con dimensiones muy distintas, el navegador o renderizador escala los píxeles. Defina las dimensiones internas para el tamaño de salida previsto en lugar de depender solo del escalado CSS.

3. ¿Puede Aspose.HTML renderizar un Canvas dibujado con JavaScript?

Sí. Cargue un documento HTML con el elemento <canvas> y su script, permita que termine la ejecución y luego convierta o renderice el documento. El dibujo directo en C# con ICanvasRenderingContext2D está disponible cuando no se necesita JavaScript.

4. ¿Renderizar HTML Canvas como PDF convierte el dibujo en vectores HTML o SVG editables?

No. Canvas es una superficie de dibujo de mapa de bits. El renderizado conserva su estado visible en el documento de salida, pero no reconstruye el dibujo como elementos HTML o trazados SVG editables.

5. ¿Puedo guardar HTML Canvas como imagen en lugar de PDF?

Sí. Renderice el HTMLDocument que contiene el lienzo mediante un ImageDevice configurado para la salida rasterizada requerida. El lienzo forma parte del diseño, por lo que el tamaño de página, los márgenes y el HTML circundante pueden afectar la imagen.