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

آموزش Rectangle و کشیدن اشکال مختلف در بوم نقاشی canvas در html5

این مورد را ارزیابی کنید
(0 رای‌ها)
منتشرشده در آموزش html

پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش کامل canvas در html5 | آموزش فارسی و رایگان

شروع آموزش html : قبل از فکر کردن در مورد ایجاد بازی های کنشی HTML5، اجازه دهید با اساس آن شروع کنیم.

ابتدا روی دکمه ی قرمز کلیک کنید ( برای درک بهتر این بخش از آموزش بهتر است مقاله قبلی را مطاعه فرمائید آموزش canvas ) این دکمه با کدهای زیر بوجود می آید . اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتماال تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.

<canvas id="c1" width="200" height=" 200" style="border:solid 1px #000000;"></canvas>
<button onclick="draw_square();return true;">دکمه قرمز</ button>

<script>
function draw_square() {
var c1 = document.getElementById("c1");
var c1_context = c1.getContext("2d");
c1_context.fillStyle = "#f00";
c1_context.fillRect(50, 50, 100, 100);
}
</script>

برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب opening و برچسب closing از <canvas> قرار ندهید، مرورگرهایی که بوم نقاشی را پشتیبانی می کنند، آن را نادیده خواهند گرفت. شما می توانید فقط از جاوااسکریپت برای انجام نقاشی خود استفاده کنید.

 قانون شماره یک، عنصر بوم نقاشی شما باید دارای یک ID باشد، بنابراین می توانیم از جاوااسکریپت برای قراردادن آن استفاده کنیم. قانون شماره دو، هر بوم نقاشی دارای یک کانتکست می باشد. در واقع کانتکست بوم نقاشی آن چیزی است که قرار است روی آن نقاشی بکشیم، نه خود بوم

var c1 = document.getElementById("c1");
var c1_context = c1.getContext("2d");

از لحاظ نگارش، نه تنها کانتکست های دو بعدی، بلکه سه بعدی آن نیز در دسترس می باشند. به هرحال کانتکست سه بعدی که webGL نامیده می شود، برای شما توسط W3G یا WHATWG آورده نمی شودبلکه توسط یک شرکت غیرانتفاعی به نام Khronos Group ارائه می شود. عالوه بر آن گوگل هم در دسامبر 1101 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.

اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضالع 100px بکشیم.

c1_context.fillStyle = "#f00";
c1_context.fillRect(50, 50, 100, 100);

جدول زیر روش های کشیدن مستطیل را نشان می دهد.

به کدهای زیر دقت کنید و آنها را برای درک بهتر بررسی و بکار بگیرید :

<div>
<canvas id="Canvas2" width="200" height="200" style="border:solid 1px #000000;"></canvas>

<div>
<button onclick=" blue_square_2();return true;">Blue Square</ button>
<button onclick= " red_stroke_ 2();return true;">Red Square</button>
<button onclick="clear_rect_2();return true;">Erase Everything</ button>
</div>
</div>


<script>
var c2 = document.getElementById("c2");
var c2_context = c2.getContext("2d");

function blue_square_2() { //Blue color square
c2_context.fillStyle = "#00f";
c2_context.fillRect(50, 50, 100, 100);
}

function red _stroke _2() { //Red color edges
c2_context.strokeStyle = "#f00";
c2_context.strokeRect(45, 45, 110, 110);
}

function clear_rect_2() { //Clear all
c2_context.clearRect(40, 40, 120, 120);
}
</script>

 

 پایان این بخش از آموزش

برای مطالعه بیشتر مباحث دیگر  این آموزش بر روی لینک روبرو کلیک نمائید : فهرست آموزش رایگان html5 سطح ساده تا پیشرفته

خواندن 802 دفعه
محسن محمد

با نگاهی گذرا به وب سایت های مشابه سایتپ , پی به تفاوت محصولات منتشر شده در سایتپ و این سایت ها خواهید برد .

ما در سایت ایران تمام سعیمان بر این است که محصولاتی را در اختیار شما عزیزان قرار دهیم که صحت کارکرد آنها بررسی شده و قابل استفاده باشند . در اکثر وب سایت های مشابه سایت ایران این دو مورد نادیده گرفته شده و کاربر پس از دانلود محصول مورد نظرش امکان استفاده از آنرا ندارد. به عبارت ساده تر وب سایت های مذکور فقط منتشر کننده هستند و از درستی آنها اطمینان حاصل نمیکنند .

ما این اطمینان خاطر را به شما میدهیم که محصولاتی را از سایت ایران دانلود خواهید کرد که قبل از انتشار , بطور کامل بررسی شده اند و قابل استفاده میباشند.

www.mohssen.ir | این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید

مقالات آموزشی سایتپ

  • مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr
    مشکل دو زبانه کردن جوملا 3 در تگ html با خصوصیت rtl به ltr سلام به جوملا دوستان عزیز، در حال پیاده سازی یک وب سایت چند زبانه بودیم که با یک مشکل عجیب مواجه شدیم. ما زمانی که سیستم جوملا را چند زبانه کردیم ، برای ایجاد خصوصیت های LTR و RTL که بتوانیم به هر کدام از زبان ها یک STYLE مختلف…
    آموزش جوملا خواندن 104 بار
  • آموزش اجرا و نمایش متن در بوم نقاشی html5
    آموزش اجرا و نمایش متن در بوم نقاشی html5 پیشنهاد میکنیم قبل از شروع این آموزش مبحث قلبی را مطالعه فرمائید : آموزش طراحی تصویر در بوم نقاشی html5 شروع آموزش : کلمات جادویی برای چاپ متن در بوم نقاشی عبارتند از Fillstyle ،Strokestyle ،Font ،TextBaseline و در انتها filltext و stroketext. <div> <canvas id="c6" width="600" height="200" style="border:solid 1px…
    آموزش html خواندن 34 بار
  • رفع خطای Notice و Strict Standards و Deprecated در جوملا
    رفع خطای Notice و Strict Standards و Deprecated در جوملا در این مقاله آموزش جوملا با سه نوع خطای php از جمله Notice و Strict Standards و Deprecated که در جوملا ممکن است با آن روبرو شوید به صورت کامل آشنا خواهید شد و روش حل این موارد را می آموزید. روزانه تعداد زیادی از سوالات کاربران مربوط به خطاهای…
    آموزش جوملا خواندن 49 بار
  • گواهینامه امنیت SSL چیست و هر آنچه درباره پروتکل https باید بدانید
    گواهینامه امنیت SSL چیست و هر آنچه درباره پروتکل https باید بدانید مقاله پیش رو یک مقاله جامع و کاربردی است که نیاز شما را درباره امنیت خدمات دهنده و خدمات گیرنده , یا به عبارت ساده تر , امنیت اطلاعات ردو بدل شده بین کاربر و سرور وب سایت برطرف میکند . این مقاله از وب سایت های مختلف جمع آوری…
    آموزش هاست خواندن 125 بار
نمایش تمام مقالات سایتپ - کلیک نمائید

آموزش رایگان html5