Створення HTML5 Canvas за допомогою C#

У цій статті я покажу вам, як створити елемент HTML5 Canvas із графікою за допомогою C#. Ви можете вбудувати цю функцію у свої веб-програми .NET для динамічного створення та інтеграції HTML5 Canvas на веб-сторінках.

Елемент HTML5 Canvas використовується для малювання графіки на льоту на веб-сторінках. Він надає вам область, яка діє як контейнер графічних або креслених об’єктів. Ви можете малювати контури, рамки, тексти, зображення та інші об’єкти, а потім перетворювати їх у формати зображень. Aspose.Imaging for .NET дозволяє генерувати елемент Canvas HTML5 за допомогою C# або VB.NET. Ця функція дає змогу динамічно створювати HTML5 Canvas і встановлювати його вихідний графічний файл у ваших веб-додатках, таких як програма ASP.NET. Отже, давайте продовжимо, щоб перевірити, як створити елемент HTML5 Canvas за допомогою C# з Aspose.Imaging for .NET API.

C# API для створення полотна HTML5 – встановлення

Перш за все, давайте розглянемо, як інсталювати Aspose.Imaging for .NET у вашій програмі .NET. Це так просто, як пиріг. Ви можете додати посилання на API DLL або встановити його за допомогою NuGet Package Manager.

PM> Install-Package Aspose.Imaging

Створіть веб-сторінку з HTML5 Canvas за допомогою C#

HTML5 Canvas дозволяє встановити вихідне зображення, яке відображатиметься в області полотна. Використовуючи Aspose.Imaging for .NET, ви можете експортувати графіку CDR, CMX, EMF, WMF і SVG на полотно HTML5, не турбуючись про код HTML, JavaScript і CSS. Нижче наведено кроки для створення HTML-сторінки з елементом HTML5 Canvas.

  • Завантажте графічний файл, який ви хочете встановити як джерело полотна, використовуючи метод Image.Load().
  • Створіть HTML5 Canvas, експортувавши зображення за допомогою методу Image.Save().

У наведеному нижче прикладі коду показано, як створити HTML5 Canvas із графікою за допомогою C#.

using (var image = Image.Load(@"Sample.svg"))
{
    image.Save(@"Canvas.html", new Html5CanvasOptions
    {
        VectorRasterizationOptions = new SvgRasterizationOptions()
    });
}

Створення елемента Canvas HTML5 лише за допомогою C#

У попередньому прикладі ми створили повну HTML-сторінку, яка містить елемент HTML5 Canvas. Однак у деяких випадках вам може знадобитися створити елемент canvas лише для того, щоб вставити його у свою веб-сторінку. Для таких випадків ви можете налаштувати Aspose.Imaging API, щоб уникнути створення повної сторінки HTML. Нижче наведено кроки для створення елемента HTML5 Canvas.

  • Завантажте графічний файл, щоб встановити його як джерело полотна за допомогою методу Image.Load().
  • Установіть для властивості Html5CanvasOptions.FullHtmlPage значення false.
  • Експортуйте зображення в HTML за допомогою методу Image.Save().

У наведеному нижче прикладі коду показано, як створити елемент HTML5 Canvas лише за допомогою C#.

using (var image = Image.Load(@"Sample.svg"))
{
    image.Save(@"Canvas.html", new Html5CanvasOptions
    {
        VectorRasterizationOptions = new SvgRasterizationOptions(),
        FullHtmlPage = false
    });
}

Висновок

У цій статті описано, як динамічно генерувати HTML5 Canvas за допомогою C# у програмах .NET. Ми побачили, як створити повну HTML-сторінку, що містить HTML5 Canvas або HTML5 Canvas лише за допомогою Aspose.Imaging for .NET. Ви можете дізнатися більше про API, використовуючи документацію.

Дивись також