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>الاختبار يرى ‹/›