آموزش HTML
سلام با قسمت دوم آموزش Html از دوره آموزش طراحی سایت در خدمت شما هستیم
آموزش Canvas
یکی از داغ ترین موضوعات HTML5 موضوع canvas می باشد، اما دقیقا canvas چیست؟
canvas یک پارچه ی ساده بافته شده ی سنگین می باشد که برای ساختن قایق، چادر، کوله پشتی، خیمه و دیگر ابزاری که استحکام لازم دارند، استفاده می شود. و همچنین توسط نقاشان به عنوان سطح نقاشی که روی چارچوب چوبی نصب شده باشد، استفاده می شود.
شاید این جوابی که شما به دنبال آن بودید، نباشد.به هرحال canvas در HTML5 از کاربرد آن توسط هنرمندان تقلید می کند و بوم نقاشی نامیده می شود.
بوم نقاشی یک فضای خالی بدون رنگ ( حتی بدون سفید) است، که قرار است با مداد و قلم موی جاوااسکریپت تبدیل به یک کار هنری شود.
البته که وجود بوم نقاشی تنها برای یک تصویر ثابت نیست. تصویر ثابت می تواند به سادگی به وسیله ی عنصر قدیمی img مورد بررسی قرار بگیرد. با جاوااسکریپت به عنوان قلم موی خود، می توانید یک انیمیشن شاد و یا حتی بازیهای تکرار شونده ایجاد کنید.
اگر قبلا انیمیشن های درخشانی ایجاد کرده اید و امید دارید که یک ورژن HTML5 ایجاد کنید، ابزاری وجود دارند که در انجام آن به شما کمک می کنند. یکی از آنها Flash to HTML5 می باشد.
HTML5 مقوله ی خیلی بزرگی است، آنقدر بزرگ که می توانید در مورد آن یک کتاب بنویسید. هدف من در این آموزش تحت پوشش قرار دادن جزئیات مربوط به بوم نقاشی نیست، بلکه تنها معرفی مختصری از آن است. به یاد داشته باشد که این تنها شروع آن است.
برای ایجاد بوم نقاشی، کد ساده ی زیر لازم است.
<canvas width="200" height="200"></canvas>
به هرحال به یاد داشته باشید که مرز یک بوم نقاشی یک آبجکت ناپیداست. این برنامه فضایی را می گیرد اما شما آن را نمی بینید. اجازه دهید یک سبک مرزی اضافه کرده و از ID برای مرجع استفاده کنیم. هدف از ID این است که با استفاده از DOM (document object model) آن را قابل دسترس کنیم. بدون مرجع ID، جاوا اسکریپت، در این مورد قلم موی شما، هیچ ایده ای برای نقاشی روی بوم ندارد.
<canvas id="Canvas1" width="200" height="200" style="border:solid 1px #000000"></canvas>
اگر در قسمت بالا به جای یک تیره و مربع، یک جمجمه با دو استخوان ضربدری می بینیدبه این معناست که مرورگر شما بوم نقاشی را پشتیبانی نمی کند. ممکن است تمایل داشته باشید مرورگری دانلود کنید که با بوم نقاشی کار کند
آموزش کن وس Rectangle در HTML
قبل از فکر کردن در مورد ایجاد بازی های کنشی HTML5، اجازه دهید با اساس آن شروع کنیم.
ابتدا روی دکمه ی قرمز کلیک کنید. اگر دکمه ی قرمز در بوم نقاشی نمی بینید، احتمالا تمایل داشته باشید مرورگر درستی برای ادامه بگیرید.
<canvas id="c1" width="200" height="200" style="border:solid 1px #000000;"></canvas>
<button ="draw_square();return true;">Red Square</button>
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);
}
برای کشیدن هرچیزی در بوم نقاشی، چیزی بین برچسب 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);
جدول زیر روش های کشیدن مستطیل را نشان می دهد.
<div>
<canvas id="Canvas2" width="200" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button ="blue_square_2();return true;">Blue Square</button>
<button ="red_stroke_2();return true;">Red Square</button>
<button ="clear_rect_2();return true;">Erase Everything</button>
</div>
</div>
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);
}
چطوری سایه بیندازیم؟
از آنجایی که اکنون می دانید چطور مستطیل بکشید، احتمالا تمایل داشته باشید با انداختن سایه آن را زیباتر کنید. این کار خیلی راحت انجام می شود. لازم است که فقط چند خط بیشتر به کد برنامه خود اضافه کنید. اجازه دهید اول به چند ویژگی که در انداختن سایه دخیل هستند، نگاهی داشته باشیم.
و در ادامه می بینید.
<div><canvas id="c8" width="200" height="200" style="border:solid 1px #000000;"></canvas></div>
var c8 = document.getElementById("c8");
var c8_context = c8.getContext("2d");
function draw_rectangle() {
c8_context.shadowOffsetX = 5;
c8_context.shadowOffsetY = 5;
c8_context.shadowBlur = 10;
c8_context.shadowColor = "DarkGoldenRod";
c8_context.fillStyle = "Gold";
c8_context.fillRect(20, 20, 100, 120);
}
= draw_rectangle();
همانطور که در کد بالا می بینید، برای ترسیم یک شکل با سایه، قبل از کشیدن سایه لازم است ویژگی های آن را مشخص کنید.
آموزش کن وس Path در HTML:
چگونه یک مسیر بکشیم؟
ابتدا باید یک خط بکشیم. در اینجا چگونگی کشیدن خط قهوه ای به شما ارائه شده است.
<div>
<canvas id="Canvas2" width="600" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button ="Vertical_line();return true;">Click me to draw a brown vertical line</button>
</div>
</div>
var c3 = document.getElementById("c3");
var c3_context = c3.getContext("2d");
function Vertical_line() {
c3_context.moveTo(300, 10);
c3_context.lineTo(300, 190);
c3_context.strokeStyle = "brown";
c3_context.stroke();
}
روش هایی که واقعا در اینجا اتفاق می افتند، عبارتند از moveTo ، lineTo، stroke، و strokeStyle.
نمایش آن را در زیر چک کنید، که روش beginPath نقش مهمی دارد. بدون آن آخرین stroke خط قبلی را با آخرین رنگ strokeStyle فراخوانده شده، دوباره ترسیم می کند.
<div>
<canvas id="c4" width="600" height="200" style="border:solid 1px #000000;"></canvas>
<div>
<button ="Vertical_2px_Red();return true;">Vertical 2px Red line</button>
<button ="Vertical_1px_Blue();return true;">Vertical 1px Blue line</button>
<button ="Horizontal_2px_Green();return true;">Horizontal 2px Green line</button>
<button ="Clear_line();return true;">Erase Everything</button>
</div>
</div>
var c4 = document.getElementById("c4");
var c4_context = c4.getContext("2d");
function Vertical_2px_Red() {
c4_context.beginPath();
c4_context.moveTo(300, 10);
c4_context.lineTo(300, 190);
c4_context.strokeStyle = "Red";
c4_context.stroke();
}
function Vertical_1px_Blue() {
c4_context.beginPath();
c4_context.moveTo(350.5, 10);
c4_context.lineTo(350.5, 190);
c4_context.strokeStyle = "Blue";
c4_context.stroke();
}
function Horizontal_2px_Green() {
c4_context.beginPath();
c4_context.moveTo(100, 100);
c4_context.lineTo(500, 100);
c4_context.strokeStyle = "Green";
c4_context.stroke();
}
function Clear_line() {
c4_context.clearRect(1, 1, 600, 190);
}
شاید متوجه شده باشید که در نمایش بالا دو دکمه برای کشیدن خط عمودی به شما کمک می کنند.یکی خط یک پیکسلی و دیگری خط دو پیکسلی می کشد. آنچه تفاوت ایجاد میکند مانند زیر است.
c4_context.moveTo(300, 10);
c4_context.lineTo(300, 190);
و
c4_context.moveTo(300.5, 10);
c4_context.lineTo(300.5, 190);
برای کشیدن خطی با عرض یک پیکسل، مختصات را باید به سمت راست یا چپ به 0.5 پیکسل تغییر دهید. این امر به خاطر این است که مقدار صحیح مختصات قرار استدر حاشیه ی هر پیکسل درنظر گرفته شود. کشیدن خطدر لبه باعث خواهد شد که خط در سراسر دو پیکسل مجاور گسترده شود. با تغییر مختصات 0.5 پیکسل، خط هنوز بین دو پیکسل گسترده شده اما نیمی از هر پیکسل را اشغال می کند.
با ادامه آموزش طراحی سایت همراه ما باشید
