Neste artigo, mostrarei como gerar o elemento HTML5 Canvas com gráficos usando C#. Você pode incorporar esse recurso em seus aplicativos da Web .NET para a geração dinâmica e integração do HTML5 Canvas em páginas da Web.
O elemento HTML5 Canvas é usado para desenhar gráficos em tempo real nas páginas da web. Ele fornece uma área que atua como um contêiner de gráficos ou objetos de desenho. Você pode desenhar caminhos, caixas, textos, imagens e outros objetos e depois renderizá-los em formatos de imagem. Aspose.Imaging for .NET permite que você gere um elemento HTML5 Canvas usando C# ou VB.NET. Esse recurso permite que você crie o HTML5 Canvas dinamicamente e defina seu arquivo gráfico de origem em seus aplicativos da Web, como o aplicativo ASP.NET. Então, vamos prosseguir para verificar como criar o elemento HTML5 Canvas usando C# com Aspose.Imaging for .NET API.
- API C# para gerar tela HTML5 - Instalação
- Criar uma página da Web com HTML5 Canvas usando C#
- Gerar elemento de tela HTML5 apenas usando C#
API C# para gerar tela HTML5 - Instalação
Primeiro de tudo, vamos dar uma olhada em como instalar o Aspose.Imaging for .NET dentro do seu aplicativo .NET. É tão simples quanto uma torta. Você pode adicionar uma referência à API DLL ou instalá-la usando o NuGet Package Manager.
PM> Install-Package Aspose.Imaging
Criar uma página da Web com HTML5 Canvas usando C#
O HTML5 Canvas permite definir uma imagem de origem que aparecerá na área da tela. Usando o Aspose.Imaging para .NET, você pode exportar gráficos CDR, CMX, EMF, WMF e SVG para um HTML5 Canvas sem se preocupar com o código HTML, JavaScript e CSS. A seguir estão as etapas para criar uma página HTML com um elemento HTML5 Canvas.
- Carregue um arquivo gráfico que você deseja definir como origem da tela usando o método Image.Load().
- Crie o Canvas HTML5 exportando a imagem usando o método Image.Save().
O exemplo de código a seguir mostra como criar HTML5 Canvas com gráficos usando C#.
using (var image = Image.Load(@"Sample.svg"))
{
image.Save(@"Canvas.html", new Html5CanvasOptions
{
VectorRasterizationOptions = new SvgRasterizationOptions()
});
}
Gerar elemento de tela HTML5 apenas usando C#
No exemplo anterior, geramos uma página HTML completa que contém o elemento HTML5 Canvas. No entanto, em certos casos, pode ser necessário gerar o elemento canvas apenas para incorporá-lo à sua página da web. Para esses casos, você pode configurar a API Aspose.Imaging para evitar gerar a página HTML completa. A seguir estão as etapas para gerar o elemento HTML5 Canvas.
- Carregue um arquivo gráfico para definir como fonte da tela usando o método Image.Load().
- Defina a propriedade Html5CanvasOptions.FullHtmlPage como false.
- Exporte a imagem para HTML usando o método Image.Save().
O exemplo de código a seguir mostra como criar o elemento Canvas HTML5 usando apenas C#.
using (var image = Image.Load(@"Sample.svg"))
{
image.Save(@"Canvas.html", new Html5CanvasOptions
{
VectorRasterizationOptions = new SvgRasterizationOptions(),
FullHtmlPage = false
});
}
Conclusão
Este artigo abordou como gerar HTML5 Canvas dinamicamente usando C# em aplicativos .NET. Vimos como criar a página HTML completa contendo um HTML5 Canvas ou HTML5 Canvas apenas usando Aspose.Imaging para .NET. Você pode explorar mais sobre a API usando a documentação.