| قدم قبلی > | < قدم بعدی |
بوم html
در این آموزش html به معرفی بوم html می پردازیم.
عنصر <canvas> برای رسم گرافیک در یک صفحه وب استفاده می شود.
گرافیک به سمت چپ با <canvas> ایجاد می شود. این چهار عنصر را نشان می دهد: یک مستطیل قرمز، یک مستطیل شیب، یک مستطیل چند رنگ و یک متن رنگی.
HTML Canvas چیست؟
عنصر <canvas> برای رسم گرافیک، بر روی پرواز، از طریق جاوا اسکریپت استفاده می شود.
عنصر <canvas> فقط یک ظرف برای گرافیک است. شما باید از جاوا اسکریپت برای رسم گرافیک استفاده کنید.
نقاشی دارای چندین روش برای رسم مسیرها، جعبه ها، حلقه ها، متن ها و اضافه کردن تصاویر است.
پشتیبانی مرورگر
اعداد در جدول اول نسخه اول مرورگر را مشخص می کند که به طور کامل از عنصر <canvas> پشتیبانی می کند.
نمونه های بوم
یک بوم یک منطقه مستطیلی در یک صفحه HTML است. به طور پیشفرض یک بوم دارای مرز و هیچ محتوایی نیست.
نشانه گذاری به نظر می رسد به شرح زیر است:
۱ | <canvas id="myCanvas" width="۲۰۰" height="۱۰۰"></canvas> |
توجه: همیشه مشخصه id (برای اشاره به یک اسکریپت) و یک ویژگی width و height برای تعیین اندازه بوم را مشخص کنید. برای اضافه کردن یک مرز از ویژگی سبک استفاده کنید.
۱ ۲ | <canvas id="myCanvas" width="۲۰۰" height="۱۰۰" style="border:1px solid #000000;"> </canvas> |
۱ ۲ ۳ ۴ ۵ | var c = document.getElementById("myCanvas"); var ctx = c.getContext("۲d"); ctx.moveTo(۰, ۰); ctx.lineTo(۲۰۰, ۱۰۰); ctx.stroke(); |
۱ ۲ ۳ ۴ ۵ | var c = document.getElementById("myCanvas"); var ctx = c.getContext("۲d"); ctx.beginPath(); ctx.arc(۹۵, ۵۰, ۴۰, ۰, ۲ * Math.PI); ctx.stroke(); |
۱ ۲ ۳ ۴ | var c = document.getElementById("myCanvas"); var ctx = c.getContext("۲d"); ctx.font = "۳۰px Arial"; ctx.fillText("Hello World", ۱۰, ۵۰); |
۱ ۲ ۳ ۴ | var c = document.getElementById("myCanvas"); var ctx = c.getContext("۲d"); ctx.font = "۳۰px Arial"; ctx.strokeText("Hello World", ۱۰, ۵۰); |
رسم گرادیان خطی
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | var c = document.getElementById("myCanvas"); var ctx = c.getContext("۲d"); // Create gradient var grd = ctx.createLinearGradient(۰, ۰, ۲۰۰, ۰); grd.addColorStop(۰, "red"); grd.addColorStop(۱, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(۱۰, ۱۰, ۱۵۰, ۸۰); |
رسم گرادیان خطی دایره ی
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ | var c = document.getElementById("myCanvas"); var ctx = c.getContext("۲d"); // Create gradient var grd = ctx.createRadialGradient(۷۵, ۵۰, ۵, ۹۰, ۶۰, ۱۰۰); grd.addColorStop(۰, "red"); grd.addColorStop(۱, "white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(۱۰, ۱۰, ۱۵۰, ۸۰); |
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.