دليل HTML

كامل قائمة علامات HTML

خاصية HTML canvas lineJoin

lineJoin هي الخاصية التي تستخدم في API Canvas 2D لتحديد كيفية توصيل الأجزاء المتصلة من خطوط، دوائر، أو منحنيات (تُتجاهل الأجزاء التي طولها 0، حيث تكون النهاية والمؤشر في نفس الموضع).

دليل مرجع HTML canvas

مثال مباشر

عند تقاطع اثنين من الخطوط، يتم إنشاء زاوية دائرية:

مثال

<!DOCTYPE html>
<html>
<head>
<title>استخدام خاصية lineJoin في HTML canvas (موقع دروس أساسيات الويب oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 canvas.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
</script>
</body>
</html>

اختبار لمعرفة ‹/›

توافق المتصفحات

IEFirefoxOperaChromeSafari

يدعم متصفحات Internet Explorer 9،Firefox،Opera،Chrome وSafari خاصية lineJoin.

ملاحظة:يستخدم متصفح Internet Explorer 8 وما قبل ذلك لا يدعم عنصر <canvas>.

التعريف والاستخدام

عندما يلتقيان سلسلتان، يحدد أو يعيد lineJoin الخاصية نوع الزاوية المكونة.

ملاحظة:قيمة "miter" معتمدةmiterLimit تأثير الخاصية.

القيمة الافتراضية:	miter
قواعد اللغة الجافا سكربت:	السياق.lineJoin="bevel\|round\|miter";

قيمة الخاصية

القيمة	الوصف
bevel	إنشاء زوايا مائلة.
round	إنشاء زوايا مستديرة.
miter	الافتراضي. إنشاء زوايا حادة.

دليل مرجع HTML canvas

HTML: <template> علامة