دليل مرجعي لـ HTML

مجموعة كاملة من عناصر HTML

خاصية strokeStyle في HTML canvas

يستخدم خاصية strokeStyle في HTML لتحديد لون القلم، التدرج أو النمط. عنصر <canvas> يسمح لك بتصميم الرسوم باستخدام JavaScript على صفحة الويب. لكل لوحة رسم يوجد عناصر تعرف على طولها وعرضها، وهي الطول والعرض.

دليل مرجع HTML5 canvas

مثال عبر الإنترنت

رسم مستطيل باستخدام لون الخط الأحمر:}}

عرض مثال لاستخدام خاصية strokeStyle لـ canvas HTML عبر الإنترنت:

مثال

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

اختبار لرؤية ‹/›

تطابق المتصفحات

IEFirefoxOperaChromeSafari

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

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

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

يُعرف strokeStyle الخاصية أو يرجع إلى اللون، المتدرج أو النمط المُستخدم في الخط.

القيمة الافتراضية:	#000000
جملة البرمجة بـ JavaScript:	السياق.strokeStyle=color\|gradient\|النمط;

قيمة الخاصية

قيمة	وصف
color	لإشارة إلى لون خط الرسم قيمة الألوان الخاصة بـ CSS). القيمة الافتراضية هي #000000.
gradient	لإنشاء كائن متدرج لملء الرسم (مستدق أو مستقيم)
النمط	لإنشاء خط ناصع نمط. النمط المعادلة.

مثال عبر الإنترنت

رسم مستطيل. استخدم خط ناصع:

عرض مثال لاستخدام خاصية strokeStyle لـ canvas HTML عبر الإنترنت:

مثال

<!DOCTYPE html>
<html>
<head>
<title>استخدام خاصية strokeStyle لـ canvas HTML (موقع تعليمي أساسي oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة canvas HTML5.</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//ملء متدرج
ctx.strokeStyle=gradient;
ctx.lineWidth=5;
ctx.strokeRect(20,20,150,100);
</script>
</body>
</html>

اختبار لرؤية ‹/›

مثال عبر الإنترنت

اكتب نصًا باستخدام خط ناصع "Big smile!":

عرض مثال لاستخدام خاصية strokeStyle لـ canvas HTML عبر الإنترنت:

مثال

<!DOCTYPE html>
<html>
<head>
<title>استخدام خاصية strokeStyle لـ canvas HTML (موقع تعليمي أساسي 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.font="30px　Verdana";
//　إنشاء تدرج
var　gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
//　تعبئة التدرج
ctx.strokeStyle=gradient;
ctx.strokeText("Big　smile!",10,50);
</script>
</body>
</html>

اختبار لرؤية ‹/›

دليل مرجع HTML5 canvas

HTML: <template> العلامة