HTML Canvas Reference | In Arabic

---

HTML Canvas Reference – مرجع كامل باللغة العربية لجميع خصائص/طرق المستخدمة فى الـ Canvas. يُستخدم عنصر <canvas> في HTML لرسم الرسومات على صفحة الويب.

---

 

HTML Canvas

 

يمنحك عنصر <canvas> طريقة سهلة وفعالة لرسم الرسومات باستخدام JavaScript.

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

يمكن استخدامه لرسم الرسوم البيانية (مثل المربعات والدوائر..إلخ) ، وإنشاء تكوينات للصور أو عمل رسوم متحركة ورسم النصوص.

للمزيد من المعلومات حول إستخدامات الـ Canvas وكيفية تضمينة فى صفحات الويب، تابع هذا الفصل: HTML5 Canvas Graphics.

 

---

 

HTML Canvas Reference

 

الظلال – Shadows

 

الخاصية (property)	الوصف
shadowcolor	يقوم بتعيين اللون الذي سيستخدم للظلال.
shadowBlur	يٌستخدم لتعيين أو إرجاع مستوى التمويه للظلال.
shadowoffsetx	يٌستخدم لتعيين أو إرجاع المسافة الأفقية للظل من الشكل.
Shadowoffsety	يٌستخدم لتعيين أو إرجاع المسافة الرأسية للظل من الشكل.

 

الألوان – Colors

 

الخاصية (property)	الوصف
fillStyle	تٌستخدم لتعيين أو إرجاع اللون أو التدرج أو النمط المستخدم لتعبئة الرسم، عن طريق الدالتين (أو الطريقتين) ()fillRect و ()fill.
strokestyle	يٌستخدم لتعيين أو إرجاع اللون أو التدرج اللوني أو النقش المستخدم للحدود.

 

أنماط الخط – Line Styles

 

الخاصية (property)	الوصف
linaCap	تُستخدم لتعيين كيفية رسم نهايات الخطوط.
lineJoin	تُستخدم لتعيين أو إرجاع نوع الركن الذي تم إنشاؤه، عندما يلتقي خطان.
lineWidth	تُستخدم لتعيين أو إرجاع عرض الخط الحالي.
miterlimit	تُستخدم لتعيين أو إرجاع الحد الأقصى لطول ميتري.

 

المستطيلات – Rectangles

 

الطريقة (Method)	الوصف
()rect	يقوم بإنشاء مستطيلاً.
()fillRect	يقوم برسم مستطيلاً ممتلئاً.
()strokeRect	يقوم برسم مستطيلاً بدون تعبئة.
clearRect(0	يقوم بمسح وحدات البكسل المحددة داخل مستطيل معين.

 

المسارات – Paths

 

الطريقة (Method)	الوصف
()fill	يقوم بملأ مسار الرسم الحالي.
()stroke	يقوم برسم المسار الذي حددته باستخدام لون strokeStyle الحالي.
()beginPath	يقوم ببدأ مسارًا (أو يعيد) تعيين المسار الحالي.
()closePath	يقوم بإنشاء مسارًا من النقطة الحالية إلى نقطة البداية.
()moveTo	يقوم بنقل المسار إلى النقطة المحددة في الـ Canvas، بدون إنشاء خط.
()lineTo	يقوم بإضافة نقطة جديدة وينشئ خطًا لتلك النقطة من آخر نقطة محددة في الـ Canvas.
()clip	يقوم بقطع منطقة بأي شكل وحجم من الـ Canvas الأصلي.
()quadraticCurveTo	يقوم بإضافة منحنيات (تربيعية) إلى مساراتك.
()bezierCurveTo	يقوم بإضافة منحنيات (مكعبة) إلى مساراتك.
()arc	يقوم بإنشاء الأقواس والمنحنيات لمساعدتك فى رسم الدوائر أو أجزاء منها.
()arcTo	تُستخدم عند رسم دوائر أو دوائر جزئية (يمكن استخدامه أيضًا لرسم مستطيلات ذات زوايا منحنية بسهولة).
()close	يقوم بإنشاء قوس أو منحنى بين مماسين.
()isPointInPath	يٌستخدم لتحديد ما إذا كانت الإحداثيات التي تقدمها متضمنة في المسار الحالي أم لا.
()isPointInStrock	يٌستخدم لتحديد ما إذا كانت الإحداثيات التي تقدمها متضمنة داخل حد المسار الحالي فقط – وليس المنطقة بأكملها التي يغطيها المسار.

 

التحولات – Transformations

 

الطريقة (Method)	الوصف
()translate	يقوم بضبط موضع نظام إحداثيات الـ Canvas.
()scale	يُستخدم لتغيير حجم نظام إحداثيات الـ Canvas إما بزيادته أو إنقاصه.
()rotate	يقوم بتدوير الرسم الحالي.
()transform	يُستخدم لتوسيع نطاق الـ Canvas وانحرافها وترجمتها.
()setTransform	يعيد تعيين التحويل الحالي إلى مصفوفة الهوية identity matrix، ثم يدير التحويل.

 

النص – Text

 

الخصائص – Properties

الخاصية (property)	الوصف
font	تٌستخدم لتعيين أو إرجاع خصائص الخط الحالية لمحتوى النص.
textAlign	تٌستخدم لتعيين أو إرجاع المحاذاة الحالية لمحتوى النص.
textBaseline	تٌستخدم لتعيين أو إرجاع الخط الأساسي للنص الحالي المستخدم عند رسم النص.

 

الطرق – Methods

 

الطريقة (Method)	الوصف
()fillText	تسمح لك برسم نص معبأ على الـ Canvas.
()strokeText	تسمح لك برسم نص غير معبأ على الـ Canvas.
()measureText	تقوم بإرجاع كائن يحتوي على عرض النص المحدد.

 

رسم الصور – Image Drawing

 

الطريقة (Method)	الوصف
()drawImage	تتيح لك برسم الصور أو إضافة مقاطع الفيديو أو أجزاء منها فقط على الـ Canvas.

 

التلاعب بالبكسل – Pixel Manipulation

 

الخصائص – Properties

الخاصية (property)	الوصف
data	تقوم بإرجاع كائن يحتوي على بيانات صورة لكائن ImageData محدد.
width	تُرجع عرض كائن ImageData.
height	تُرجع ارتفاع كائن ImageData.

 

الطرق – Methods

 

الطريقة (Method)	الوصف
()createImageData	يقوم بإنشاء كائن ImageData جديد وفارغ. ويجلب المعلومات لكل بكسل من الـ Canvas.
()getImageData	يُرجع كائن ImageData الذي ينسخ بيانات البكسل للمستطيل المحدد على الـ Canvas.
()putImageData	يضع بيانات الصورة من كائن ImageData محدد مرة أخرى على الـ Canvas.

---

 

التركيب – Compositing

 

الخاصية (property)	الوصف
Globalpha	تُستخدم لتعيين أو إرجاع قيمة ألفا أو شفافية الرسم الحالي.
globalCompositeOperation	تُستخدم لضبط أو إعادة كيفية رسم صورة جديدة على صورة موجودة.

 

الحالة – State

 

الطريقة (Method)	الوصف
()save	يٌستخدم لحفظ حالة الـ Canvas بحيث يمكنك استعادتها في وقت لاحق.
()restore	تُكمل طريقة ()save حيث تُستخدم لاستعادة حالة الـ Canvas إلى تلك التي قمت بحفظها مسبقًا.

 

طرق أخرى – Other Methods

 

الطريقة (Method)	الوصف
()getContext	تُستخدم فى إرجاع سياق الرسم (وهو كائن يحتوي على جميع خصائص الرسم والوظائف التي تستخدمها للرسم على الـ Canvas).
()toDataURL	تُستخدم للحصول على تمثيل آمن لعنوان URL مشفر باستخدام base64 للـ Canvases الخاصة بك
()createEvent	تقوم بإنشاء كائن حدث. يمكن أن يكون الحدث من أي نوع، ويجب أن تتم تهيئته قبل الاستخدام.