HTML canvas miterLimit attribute

Definition and Usage

miterLimit Property settings or returns the maximum bevel length.

The bevel length refers to the distance between the inner and outer angles at the intersection of two lines.

Tip:Only when the lineJoin attribute is "miterWhen the lineJoin attribute is "

The smaller the angle of the corner, the longer the bevel length will be.

To avoid a bevel length that is too long, we can use the miterLimit property.

If the bevel length exceeds the value of miterLimit, the corner will be joined with the lineJoin of "bevel" type to display (Illustration 3):

Example

With the maximum bevel length 5, draw a line:

Your browser does not support the canvas tag.

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 的值,边角会以 lineJoin 的 "bevel" 类型来显示。

প্রযুক্তিগত বিবরণ

ডিফল্ট মান: 10

ব্রাউজার সমর্থন

টেবিলের সংখ্যা এই ব্যাপ্তির প্রথম সঠিকভাবে সমর্থনকারী ব্রাউজার সংস্করণকে নির্দেশ করে

চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
চ্রোম এজ ফায়ারফক্স স্যাফারি অপেরা
4.0 9.0 3.6 4.0 10.1

মন্তব্য:Internet Explorer 8 ও তার পূর্ববর্তী সংস্করণগুলি <canvas> ইলেকট্রন সমর্থন করে না。