آموزش کار با Canvas در HTML5 قسمت اول
1 0

آموزش کار با Canvas در HTML5 قسمت اول


آموزش کار با Canvas در HTML5 قسمت اول معرفی Canvas

Canvas چیست؟

Canvas یکی از تگ های HTML5 می باشد که با استفاده از جاوااسکریپت می توان اشکال هندسی و طرح های گرافیکی دوبعدی را رو Canvas کشید.

با استفاده از Canvas می توان طرح های دو بعدی ، انیمیشن های دو بعدی و بازی های کامپیوتری با گرافیگ بالا را در صفحات وب پیاده سازی کرد. در سایت http://www.pirateslovedaisies.com می توانید یک نمونه بازی نوشته شده با Canvas و جاوااسکریپت را ببینید. و همچنین در پست های قبلی سایت کد پن را معرفی کردیم، که انیمیشن های زیادی را با استفاده از HTML5 ، CSS3 و javascript پیاده سازی کرده اند.

 

ایجاد تگ Canvas

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        canvas {
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        <canvas width="600" height="600" id="canvas"></canvas>
    </div>
    <script type="text/javascript" language="javascript">
        var canvas = document.getElementById('canvas');
        var c = canvas.getContext('2d');       
    </script>
</body>
</html>

اگر به مثال بالا نگاه کنید خواهید دید که تگ Canvas را قرار دادیم و سپس طول و عرض آن را مشخص کردیم و سپس یک آی دی به نام canvas به آن اختصاص دادیم.

در نهایت توسط CSS یک زمینه سبز رنگ برای آن در نظر گرفتیم.

برای این که بتوانیم با استفاده از جاوااسکریپت روی canvas اشکال هندسی و طرح های گرافیکی خود را پیاده سازی کنیم. ابتدا canvas را با استفاده از getElementById توسط آی دی آن دریافت می کنیم و سپس با استفاده از  getContext('2d') تمام توابع دوبعدی را به canvas خود اختصاص داده و در یک متغیری به نام c قرار می دهیم.

پشتیبانی مرورگرها از canvas

برای این که بتوانید با canvas کار کنید باید مرورگر شما از canvas پشتیبانی کند. برای این کار به سایت http://html5test.com بروید با ورود به این سایت، اطلاعاتی کاملی از مرورگر شما نمایش می دهد و مواردی که مرورگر شما پشتیبانی می کند را نمایش می دهد.

دانلود

نویسنده حسین فتحی
گروه مطلب Canvas
نوع مطلب سورس کد و آموزش
تاریخ انتشار ۱۸ مرداد ۱۳۹۵
منبع ایران گنج
تعداد نظرات ۰
قیمت کاربران مهمان
توضیح توجه:
  • زمانی که روی لینک دانلود کلیک می کنید لینک دانلود به مدت 24 ساعت معتبر خواهد بود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

نظر / سوال

Captcha