צור HTML5 Canvas באמצעות C#

במאמר זה, אני אראה לך כיצד ליצור את אלמנט HTML5 Canvas עם גרפיקה באמצעות C#. אתה יכול להטמיע תכונה זו בתוך יישומי האינטרנט .NET שלך ליצירה דינמית ושילוב של HTML5 Canvas בדפי אינטרנט.

אלמנט HTML5 Canvas משמש לציור גרפיקה תוך כדי תנועה בדפי האינטרנט. הוא מספק לך אזור שפועל כמיכל של אובייקטים גרפיים או ציור. אתה יכול לצייר נתיבים, תיבות, טקסטים, תמונות ואובייקטים אחרים ולאחר מכן לעבד אותם לפורמטים של תמונה. Aspose.Imaging for .NET מאפשר לך ליצור אלמנט HTML5 Canvas באמצעות C# או VB.NET. תכונה זו מאפשרת לך ליצור את HTML5 Canvas באופן דינמי ולהגדיר את קובץ גרפיקת המקור שלו בתוך יישומי האינטרנט שלך כגון יישום ASP.NET. אז בואו נמשיך הלאה כדי לבדוק כיצד ליצור את רכיב HTML5 Canvas באמצעות C# עם Aspose.Imaging עבור .NET API.

C# API ליצירת HTML5 Canvas - התקנה

קודם כל, בואו נסתכל כיצד להתקין את Aspose.Imaging עבור .NET בתוך יישום ה-.NET שלך. זה פשוט כמו עוגה. אתה יכול להוסיף הפניה ל-API DLL או להתקין אותו באמצעות NuGet Package Manager.

PM> Install-Package Aspose.Imaging

צור דף אינטרנט עם HTML5 Canvas באמצעות C#

HTML5 Canvas מאפשר לך להגדיר תמונת מקור שתופיע בתוך אזור הקנבס. באמצעות Aspose.Imaging עבור .NET, אתה יכול לייצא גרפיקת CDR, CMX, EMF, WMF ו-SVG ל-HTML5 Canvas מבלי לדאוג לגבי קוד 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()
    });
}

צור HTML5 Canvas Element רק באמצעות C#

בדוגמה הקודמת, יצרנו דף HTML שלם המכיל את האלמנט HTML5 Canvas. עם זאת, במקרים מסוימים, ייתכן שיהיה עליך ליצור את רכיב הקנבס רק כדי להטמיע אותו בתוך דף האינטרנט שלך. במקרים כאלה, אתה יכול להגדיר את Aspose.Imaging API כדי להימנע מיצירת דף ה-HTML המלא. להלן השלבים ליצירת רכיב HTML5 Canvas.

דוגמת הקוד הבאה מראה כיצד ליצור את רכיב 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 עבור NET. אתה יכול לחקור עוד על ה-API באמצעות תיעוד.

ראה גם