/ آموزش canvas در HTML5
وندا هاست
طراحی و راه اندازی وبسایت و انجمن توسط ویکی وی بی ویکی وی بی در قبال معاملات صورت گرفته با هر یک از اعضا و سفارشات طراحی خارج از این اطلاعیه هیچگونه مسئولیتی نمی پذیرد
بک لینک ها
فروش قالب وردپرس فروش فایل مشابه ژاکت وندا هاست
نمایش نتایج: از 1 به 1 از 1

موضوع: آموزش canvas در HTML5

  1. #1
    developzoom آنلاین نیست.
    developzoom
    کاربر سايت
    16نوشته1مورد پسند

    تاریخ عضویت
    Apr 2016
    شماره عضویت
    11346
    پسندیده است
    0 پست
    بلاگ
    پست
    میزان امتیاز
    11
    -

    آموزش canvas در HTML5

    شاید یکی از ابهاماتی که در ورژن ۵ از html وجود داشت و افراد زیادی با آن آشنا نیستند canvas باشد.
    در این آموزش از سایت
    آموزش برنامه نویسی
    و دسته
    آموزش طراحی سایت
    ما قصد داریم کمی با این مبحث آشنا شویم.
    پس با ما همراه باشید…

    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی

    عنصرHTML5 canvas یک راه حل آسان و قدرتمند به منظور رسم گرافیک با استفاده از جاوا اسکریپ می باشد. می توان از آن برای رسم نمودار، ترکیب عکس و یا انجام انیمیشن های ساده (و نه چندان ساده) استفاده کرد. در اینجا canvas یک عنصر ساده است که تنها دو ویژگی خاص عرض و ارتفاع دارد به علاوه تمام ویژگی های HTML5 مانند شناسه کاربری، نام و کلاس و … را دارند.



    1

    <canvas id="mycanvas" width="100" height="100"></canvas>
    شما می توانید به راحتی عنصر canvas را در DOM با استفاده از روش getElementById() که به شرح زیر است پیدا کنید:



    1

    var canvas = document.getElementById("mycanvas");
    اجازه دهید یک مثال ساده در مورد استفاده عنصر canvas در سند HTML5 ببینیم:



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19

    <!DOCTYPE HTML>
    <html>
    <head>



    <style>
    #mycanvas{border:1px solid red;}
    </style>



    </head>
    <body>

    <canvas id="mycanvas" width="100" height="100"></canvas>

    </body>
    </html>
    وقتی کد بالا را در مرورگر خود اجرا کنید نتیجه زیر را خواهید دید:
    مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی
    همانطور که در ابتدای متن گفتیم canvas ارتباط مستقیم با جاوا اسکریپ دارد حال بیایید کدی که بالا ایجاد کردیم کمی با جاوا اسکریپت توسعه دهیم.
    canvas در ابتدا خالی است، و برای نمایش چیزی، نیاز دارد یک اسکریپ برای اولین بار به ارائه متن و رسم بر روی آن دسترسی داشته باشد.
    عنصر canvas یک متد DOM به نام getContext دارد، که از آن برای ارائه متن و رسم توابع استفاده می شود. این تابع یک پارامتر می گیرد، که نوع متن آن ۲D است.
    کد زیر برای دریافت اطلاعات متن مورد نیاز همراه با بررسی اینکه مرورگر شما از عنصر canvas پشتیبانی می کند می باشد:



    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

    var canvas = document.getElementById("mycanvas");

    if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    // drawing code here
    }

    else {
    // canvas-unsupported code here
    }
    پشتیبانی از مرورگر
    آخرین نسخه از فایرفاکس، سافاری، کروم و اپرا همه از HTML5 Canvas پشتیبانی میکنند اما IE8 نمیتواند از Canvas بطور طبیعی پشتیبانی کند.
    شما می توانید از ExplorerCanvas برای پشتیبانی Canvas از طریق اینترنت اکسپلورر استفاده کنید. برای این کار کد زیر را در سند خود بنویسید:



    1

    <!--[if IE]><script src="excanvas.js"></script><![endif]-->
    برای شروع کار با canvas نیاز است شما کمی با جاوا اسکریپت آشنا باشید. در آینده سعی میکنیم بیشتر شما را با این مبحث شیرین از
    html
    آشنا کنیم.
    موفق باشید.
    منبع :
    آموزش وردپرس
    به دلیل مغایرت با قوانین ویرایش شد .

  2. نوين وردپرس تبلیغات شما

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

موضوعات مشابه

  1. لطفا راهنمایی کنید - فوری - jquery- html5 - css3
    توسط sanatisharif در انجمن گفت و گوی آزاد
    پاسخ: 3
    آخرين نوشته: 09-13-2014, 03:38 AM
  2. پاسخ: 2
    آخرين نوشته: 08-27-2014, 05:52 PM

کلمات کلیدی این موضوع

مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  
خرید بک لینک
مرجع تخصصی و رایگان ویبولتین در ایران | ویکی وی بی