شروع کار مقدماتی با HTML5 Canvas (جلسه 12) : استایل خطوط

‏  4 دقیقه
۱۲ فروردین ۱۳۹۶
شروع کار مقدماتی با HTML5 Canvas (جلسه 12) : استایل خطوط

html-canvas

در جلسه گذشته در مورد قرار دادن الگو و سایه براتون توضیح دادیم و مثالهایی رو قرار دادیم. در این جلسه قصد داریم در مورد استایل دهی به خطوط توضیحاتی رو براتون قرار بدیم.

استایل دهی به خطوط

تعدادی ویژگی هستن که میتونین اونا رو به خطوط اعمال کنید و استایلشون رو تغییر بدین.

تغییر ضخامت خطوط با lineWidth:

با استفاده از این ویژگی میتونین ضخامت خطوط رو تغییر بدین. برای این ویژگی باید مقادیر بزرگتر از 0 رو قرار بدین و مقدار پیش فرض اون 1 پیکسل هست. در اینجا با استفاده از حلقه for میایم 10 خط با ضخامتهای مختلف رو رسم میکنیم. کد زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

for (var i = 0; i < 10; i++) {
	ctx.lineWidth = 1 + i;
	ctx.beginPath();
	ctx.moveTo(10 + i * 14, 5);
	ctx.lineTo(10 + i * 14, 140);
	ctx.stroke();
}

خروجی بصورت زیر هست:html5 canvas 39

ویژگی lineCap:

با استفاده از این ویژگی میتونین استایل انتهای خطوط رو مشخص کنید. سه مقدار برای این ویژگی وجود داره و میتونین از اونا استفاده کنید.Canvas_linecap

همونطور که میبینید در تصویر بالا سه خط رسم شده. دو خط افقی که رسم شدن، برای فهم بیشتر هستن و ابتدا و انتهای خطوط رو نمایش میدن. خط عمودی سمت چپ نحوه رسم شدن پیش فرض خطوط هست و از بازه ابتدا و انتها تجاوز نخواهد کرد. این استایل پیش فرض همون حالت butt هست.

  • butt : مقدار پیش فرض ویژگی lineCap هست و همونطور که در تصویر بالا میبینید، خط سمت چپ در این حالت رسم شده است.
  • round : انتهای خطوط در این حالت گرد و دایره ای شکل هست
  • square : در این حالت شبیه به حالت butt هست، با این تفاوت که ابتدا و انتهای خطوط به اندازه نصف ضخامت خط ادامه پیدا میکنه

کد زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var lineCap = ['butt', 'round', 'square'];

// Draw guides
ctx.strokeStyle = '#09f';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(140, 10);
ctx.moveTo(10, 140);
ctx.lineTo(140, 140);
ctx.stroke();

// Draw lines
ctx.strokeStyle = 'black';
for (var i = 0; i < lineCap.length; i++) {
	ctx.lineWidth = 15;
	ctx.lineCap = lineCap[i];
	ctx.beginPath();
	ctx.moveTo(25 + i * 50, 10);
	ctx.lineTo(25 + i * 50, 140);
	ctx.stroke();
}

همونطور که دیدید یه آرایه تعریف کردیم و سه مقدار ممکن رو درون اون قرار دادیم. بعد از اون خطوط راهنما رو مشخص کردیم و در آخر هم با استفاده از حلقه for سه خط با استایل متفاوت رو رسم کردیم. خروجی بصورت زیر هست:html5 canvas 40

ویژگی lineJoin:

با استفاده از این ویژگی میتونین استایل خطوط زمانی که به هم وصل میشن رو مشخص کنید. این ویژگی 3 مقدار رو قبول میکنه و بصورت زیر هست:canvas lineJoin

  • round : در این حالت خطوط در مواقع وصل شدن به هم، گرد و round میشن
  • bevel : همونطور که در تصویر بالا میبینید در این حالت انتهای اون نه تیز هست و نه گرد شده
  • miter : در این حالت خطوط بصورت تیز و Sharp به هم متصل میشن

کد زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var lineJoin = ['round','bevel','miter'];
ctx.lineWidth = 10;

for (var i = 0; i < lineJoin.length; i++) {
  ctx.lineJoin = lineJoin[i];
  ctx.beginPath();
  ctx.moveTo(-5, 5 + i * 40);
  ctx.lineTo(35, 45 + i * 40);
  ctx.lineTo(75, 5 + i * 40);
  ctx.lineTo(115, 45 + i * 40);
  ctx.lineTo(155, 5 + i * 40);
  ctx.stroke();
}

خروجی بصورت زیر میشه:html5 canvas 41

قرار دادن Line Dash:

در این زمینه 3 ویژگی و متد وجود داره:

  • متد setLineDash : با استفاده از این متد میتونین الگوی خطوط تیره رو مشخص کنید
  • متد getLineDash : با استفاده از این متد میتونین الگوی خطوط تیره که در متد setLineDash مشخص کردید رو دریافت کنید
  • ویژگی lineDashOffset : با استفاده از این ویژگی میتونین مشخص کنید که الگوی خطوط تیره از کجا شروع بشه

کد زیر رو در نظر بگیرید:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.lineDashOffset = 10;
ctx.setLineDash([5, 15]);
console.log(ctx.getLineDash()); // [5, 15]

ctx.beginPath();
ctx.moveTo(10, 100);
ctx.lineTo(150, 100);
ctx.stroke();

خروجی بصورت زیر میشه:html5 canvas 42

بهمین راحتی.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

چه امتیازی به این مقاله می دید؟
نویسنده محمد اسفندیاری
بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.

جلسات دوره

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.

نظرات کاربران

hamed_z2001

البته همینطوره و این دوره ای که دارید آموزش میدید مقدماتیه canvas هست ، امیدوارم دوره پیشرفته ای هم برگزار کنید و ما استفاده کنیم ….
ممنونم از راهنماییت دوست عزیز … خدا خیرت بده ، همین که اسمشو گفتی خیلی راهنماییم کردی !!
موفق باشید

محمد اسفندیاری

موفق باشید

hamed_z2001

سلام
مرسی از آموزشهای خوبتون
مهندس یه سوال :
سایت http://www.kikk.be/2016/ که معرفی کردید برای ایده گرفتن ، وسطهای صفحه عکسهایی که گذاشته یه پرش روی عکس به صورت infinit رخ میده … inspect گرفتم با canvas درست شده بود … اینا به چه صورته ؟؟
اینا رو هم یاد میدید؟؟؟
سپاس

محمد اسفندیاری

سلام
ببینید دوست عزیز خودتون هم میدونین که نمیشه همه چیز رو در یک دوره آموزش داد و هر چه ایده درون سراسر وب هست رو آموزش داد…در این دوره شما با هر چیزی که از دست Canvas بر میاد آشنا میشید و قابلیتهاشو یاد میگیرید و حالا دیگه نوبت شماست که ایده های مورد نظرتونو پیاده سازی کنید…..برای اینکار میتونین سایتهای مورد نظر رو باز کنید و کدهاشو نگاه بندازید….چون ما به شما مفاهیم رو یاد دادیم، پس بهتر میتونین کدهای سایت هدف رو متوجه بشید و اونا رو پیاده سازی کنید…..
این افکتی که در این سایت وجود داره Glitch هست و با استفاده از CSS و SVG و Javascript و … میشه اون رو ساخت….
اگر میخواید بیشتر با اون آشنا بشید این لینکها میتونه کمکتون کنه
https://github.com/snorpey/glitch-canvas
http://sjhewitt.co.uk/2012/07/javascript-glitch-effect-glitch-js/
موفق باشید