سه شنبه ۲۹ تیر ۰۰ | ۱۴:۲۶ ۲۰ بازديد
آموزش کن وس Rectangle در HTML
قبل از فکر کردن در مورد ایجاد بازی های کنشی HTML5، اجازه دهید با اساس آن شروع کنیم.
ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.
<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas><button onclick="draw_square();return true;">Red Square</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 ارائه می شود. علاوه بر آن گوگل هم در دسامبر 2010 برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.
اجازه دهید از رنگ قرمز (fillStyle="#f00";) استفاده کرده و یک مربع قرمز با اضلاع 100px بکشیم.
c1_context.fillStyle = "#f00"; c1_context.fillRect(50, 50, 100, 100);
جدول زیر روش های کشیدن مستطیل را نشان می دهد.
Descriptions
Methods of "Context"
رنگ CSS، الگو یا گرادیان داخل شکل. پیش فرض fillstyle رنگ سیاه می باشد.
fillStyle
رنگ یا روش CSS از خطوط شکل.
strokeStyle
مسطتیلی بکشید که از نقطه ی x و y شروع می شود و اندازه ی طول x عرض باشد.
fillRect(x, y, width, height)
مستطیلی فقط با حاشیه های آن رسم کنید.
strokeRect(x, y, width, height)
ناحیه مشخص شده در مختصات x و y و همچنین در عرض x طول را روشن کنید.
clearRect(x, y, width, height)
جهت مشاهده نمونه مثال ها برروی دوره آموزش طراحی سایت کلیک نمایید.
