ویژگی miterLimit کانواس

تعریف و استفاده

miterLimit ویژگی برای تنظیم یا بازگرداندن طول اتصال مایل بیشترین مقدار تعریف شده است.

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

توجه:فقط زمانی که ویژگی lineJoin به صورت "miterوقتی که "

هرچه زاویه گوشه‌ها کوچکتر باشد، طول اتصال مایل بزرگتر خواهد بود.

برای جلوگیری از طول اتصال مایل زیاد، می‌توانیم از ویژگی miterLimit استفاده کنیم.

اگر طول اتصال مایل بیشتر از مقدار miterLimit باشد، گوشه‌ها با نوع join خط به صورت "bevelنوع به نمایش در می‌آید (تصویر 3):

مثال

با طول اتصال مایل بیشترین مقدار 5 خط را رسم کنید:

مرورگر شما برچسب canvas را پشتیبانی نمی‌کند.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.lineJoin="miter";
ctx.miterLimit=5;
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();

خودتان امتحان کنید

نحوه‌ی نوشتن

context.miterLimit=number;

مقدار ویژگی

مقدار توضیح
number

عدد مثبت. طول اتصال مایل بیشترین مقدار را تعیین می‌کند.

اگر طول اتصال مایل بیشتر از مقدار miterLimit باشد، گوشه‌ها با نوع join خط به صورت "bevel" نمایش داده می‌شوند.

جزئیات فنی

مقدار پیش‌فرض: 10

پشتیبانی مرورگر

اعداد در جدول نشان‌دهنده نسخه اولین مرورگری هستند که این ویژگی را کامل پشتیبانی می‌کند.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

نکته:نسخه‌های 8 و قبل از آن از عناصر <canvas> پشتیبانی نمی‌کنند.