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

دليل HTML

مجلة HTML

خاصية fillStyle في HTML canvas

يستخدم خاصية fillStyle() في HTML canvas لضبط لون الرسم، التدرج أو النمط. القيمة الافتراضية هي #000000. <canvas>الشريط يسمح لك باستخدام الجافا سكريبت لتصميم الرسومات على صفحة الويب. لكل شريط عنصرين يصفان الارتفاع والعرض، الارتفاع والعرض.

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

تعريف لون الملء الأحمر للمربع:

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

جافا سكريبت:

<!DOCTYPE html>
<html>
<head>
<title>استخدام خاصية fillStyle في 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.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>
الاختبار يرى ‹/›

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

IEFirefoxOperaChromeSafari

يدعم Internet Explorer 9 وFirefox وOpera وChrome وSafari خاصية fillStyle.

ملاحظة:Internet Explorer 8 وما قبلها لا يدعم عنصر canvas.

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

<canvas>الشريط يسمح لك باستخدام الجافا سكريبت لتصميم الرسومات على صفحة الويب. لكل شريط عنصرين يصفان الارتفاع والعرض، الارتفاع والعرض.

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

قيمة الخاصية

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

أمثلة إضافية

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

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

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

جافا سكريبت:

<!DOCTYPE html>
<html>
<head>
<title>استخدام خاصية fillStyle في 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");
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>
<p>ملاحظة: لا يدعم متصفح إنترنت إكسبلورر 8 وأحدث إصداراته علامة canvas.</p>
</body>
</html>
الاختبار يرى ‹/›

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

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

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

جافا سكريبت:

<!DOCTYPE html>
<html>
<head>
<title>استخدام خاصية fillStyle في 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");
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>
<p>ملاحظة: لا يدعم متصفح إنترنت إكسبلورر 8 وأحدث إصداراته علامة canvas.</p>
</body>
</html>
الاختبار يرى ‹/›

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

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

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

جافا سكريبت:

<!DOCTYPE html>
<html>
<head>
<title>استخدام خاصية fillStyle في 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");
var my_gradient = ctx.createLinearGradient(0, 0, 170, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(0.5, "red");
my_gradient.addColorStop(1, "white");
ctx.fillStyle = my_gradient;
ctx.fillRect(20, 20, 150, 100);
</script>
<p>ملاحظة: لا يدعم متصفح إنترنت إكسبلورر 8 وأحدث إصداراته علامة canvas.</p>
</body>
</html>
الاختبار يرى ‹/›

الصور المستخدمة:

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

استخدام الصور لتعبئة الرسم:

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

جافا سكريبت:

<!DOCTYPE html>
<html>
<head>
<title>استخدام خاصية fillStyle في canvas HTML (موقع دروس أساسيات البرمجة oldtoolbag.com)</title>
</head>
<body>
<p>تطبيق الصورة:</p>
<img src="haha.gif" id="lamp">
<p>اللوحة:</p>
<button onclick="draw('repeat')">يكرر</button> 
<button onclick="draw('repeat-x')">يكرر أفقيًا</button> 
<button onclick="draw('repeat-y')">يكرر عمودياً</button> 
<button onclick="draw('no-repeat')">لا يكرر</button>     
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 canvas.
</canvas>
<script>
function draw(direction)
{
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.clearRect(0,0,c.width,c.height); 
    var img=document.getElementById("lamp")
    var pat=ctx.createPattern(img,direction);
    ctx.rect(0,0,220,128);
    ctx.fillStyle=pat;
    ctx.fill();
}
</script>
</body>
</html>
الاختبار يرى ‹/›
دليل مرجع HTML5 canvas