English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
يستخدم خاصية fillStyle() في HTML canvas لضبط لون الرسم، التدرج أو النمط. القيمة الافتراضية هي #000000. <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 | لملء الرسم بجسم التدرج (الخطي أو الإشعاعي) |
| النمط | لملء الرسم النمط العدة |
تعريف تدرج (من الأعلى إلى الأسفل) كنمط ملء المربع:
جافا سكريبت:
<!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>الاختبار يرى ‹/›تعريف التدرج من اليسار إلى اليمين كنمط ملء المربع:
جافا سكريبت:
<!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>الاختبار يرى ‹/›تعريف التدرج من الأسود إلى الأحمر إلى الأبيض كنمط ملء المربع:
جافا سكريبت:
<!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>الاختبار يرى ‹/›استخدام الصور لتعبئة الرسم:
جافا سكريبت:
<!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>الاختبار يرى ‹/›