English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

دليل مرجع HTML

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

طريقة HTML canvas createLinearGradient()

يخلق طريقة createLinearGradient() تدرجاً خطياً على طول الخط المحدد بالمعلمات. يعود هذا الطريقة بجسم CanvasGradient خطي.

دليل مرجع HTML5 كانفاس

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

تعريف التدرج من الأحمر إلى الأبيض (من اليسار إلى اليمين) كنمط ملء المربع:

您的浏览器,不支持HTML5 canvas标签.

عرض استخدام طريقة createLinearGradient():

<!DOCTYPE html>
<html>
<head>
<title>استخدام طريقة createLinearGradient() في HTML canvas (موقع دروس أساسية - oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 كانفاس.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　grd=ctx.createLinearGradient(0,0,170,0);
لم يتم دعم علامة HTML5 canvas في متصفحك.
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>
اختبار لرؤية ‹/›

grd.addColorStop(0, "red");

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

Safari

يدعم Internet Explorer 9، Firefox، Opera، Chrome و Safari طريقة createLinearGradient().ملاحظة:

لا يدعم إصدار Internet Explorer 8 وما قبل ذلك علامة <canvas>.

التعريف والاستخدام
يُنشأ بتدريجي createLinearGradient() كائن تدريج خطي.

إشارة:يمكن استخدام التدرج لملء المربعات، الدوائر، الخطوط، النصوص، إلخ استخدم هذا العنصر كـ أو fillStyle قيمة الخاصية.

إشارة:استخدم addColorStop() يحدد الطريقة ألوانًا مختلفة، وكيفية تحديد موقع الألوان في عمود التدرج.

جملة البرمجة في JavaScript:سياق.createLinearGradient(x0,y0,x1,y1);

قيمة الم 参数

الم 参数الوصف
x0موقع البداية في x للتدرج
y0موقع البداية في y للتدرج
x1موقع النهاية في x للتدرج
y1موقع النهاية في y للتدرج

مزيد من الأمثلة

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

تحديد تدريج (من أعلى إلى أسفل) كنمط ملء المربع:

لم يتم دعم علامة <canvas> في متصفحك.

عرض التأثير باستخدام JavaScript:

<!DOCTYPE html>
<html>
<head>
<title>استخدام طريقة createLinearGradient() في HTML canvas (موقع دروس أساسية - oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 كانفاس.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var my_gradient = ctx.createLinearGradient(0, 0, 0, 170);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>
اختبار لرؤية ‹/›

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

تحديد تدريج من الأسود إلى الأحمر ثم إلى الأبيض كنمط ملء المربع:

لم يتم دعم علامة <canvas> في متصفحك.

عرض استخدام طريقة createLinearGradient():

<!DOCTYPE html>
<html>
<head>
<title>استخدام طريقة createLinearGradient() في HTML canvas (موقع دروس أساسية - oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 كانفاس.
</canvas>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
var　grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(0.5,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>
اختبار لرؤية ‹/›
دليل مرجع HTML5 كانفاس
HTML: <template> العلامة