سلام خدمت شما کاربرای گرامی ، همانطور که میدانید برای طراحی وب یکی از مهمترین موضوعات دانستن 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 ارائه می شود. علاوه بر آن گوگل هم در دسامبر ۲۰۱۰ برای اطمینان بیشتر آینده ی این استاندارد، تولید شگفت انگیز Body Browser را آزاد کرد.
اجازه دهید از رنگ قرمز (fillStyle=”#f00″;) استفاده کرده و یک مربع قرمز با اضلاع ۱۰۰px بکشیم.
c1_context.fillStyle = “#f00”;
c1_context.fillRect(50, 50, 100, 100);
جدول زیر روش های کشیدن مستطیل را نشان می دهد.
Methods of “Context”
Descriptions
fillStyle
رنگ CSS، الگو یا گرادیان داخل شکل. پیش فرض fillstyle رنگ سیاه می باشد.
strokeStyle
رنگ یا روش CSS از خطوط شکل.
fillRect(x, y, width, height)
مسطتیلی بکشید که از نقطه ی x و y شروع می شود و اندازه ی طول x عرض باشد.
strokeRect(x, y, width, height)
مستطیلی فقط با حاشیه های آن رسم کنید.
clearRect(x, y, width, height)
ناحیه مشخص شده در مختصات x و y و همچنین در عرض x طول را روشن کنید.
<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>
