دليل مراجعة Canvas HTML

دليل مراجعة Canvas HTML

استخدام علامة <canvas> في HTML لرسم الرسومات بشكل ديناميكي عبر السكربت (عادةً باستخدام JavaScript).

للحصول على معلومات إضافية حول <canvas>، يرجى قراءة دليلنا لتعلم HTML Canvas.

الألوان والأنماط والظلال

الخصائص وصف
fillStyle تعيين أو العودة إلى لون أو تدرج أو نمط الملء
strokeStyle تعيين أو العودة إلى لون أو تدرج أو نمط الخط
shadowColor تعيين أو العودة إلى لون الظل
shadowBlur تعيين أو العودة إلى مستوى البهتان للظل
shadowOffsetX تعيين أو العودة إلى المسافة الأفقية بين الظل والشكل
shadowOffsetY تعيين أو العودة إلى المسافة الرأسية بين الظل والشكل
الطريقة وصف
createLinearGradient() إنشاء تدرج خطي (يستخدم في محتوى لوحة الرسم)
createPattern() تكرار العناصر المحددة في الاتجاه المحدد
createRadialGradient() إنشاء تدرج شعاعي/دائري (يستخدم في محتوى لوحة الرسم)
addColorStop() تحديد الألوان والمواقع النهائية في شكل التدرج

نمط الخط

الخصائص وصف
lineCap تعيين أو العودة إلى نهاية نمط الخط
lineJoin تعيين أو العودة إلى نوع الزاوية الملتوية عند تقاطع الخطوط
lineWidth تعيين أو العودة إلى عرض الخط الحالي
miterLimit تعيين أو العودة إلى أقصى طول الزاوية الملتوية

المربع

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

المسار

الطريقة وصف
fill() ملء الرسم الحالي (المسار)
stroke() رسم المسار المحدد
beginPath() بدء مسار جديد أو إعادة تعيين المسار الحالي
moveTo() تحريك المسار إلى النقطة المحددة في لوحة الرسم دون إنشاء خط
closePath() إنشاء مسار يرجع إلى النقطة البدائية
lineTo() أضف نقطة جديدة ثم قم بإنشاء خط من هذه النقطة إلى النقطة المحددة في لوحة الرسم
clip() من قطع أي منطقة شكل و حجم من لوحة الرسم الأصلية
quadraticCurveTo() إنشاء منحنى بيزاري ثنائي
bezierCurveTo() إنشاء منحنى بيزاري ثلاثي
arc() إنشاء منحنى/دائرة (لإنشاء دائرة أو جزء من الدائرة)
arcTo() إنشاء منحنى/دائرة بين خطوط التشذيب
isPointInPath() إذا كان النقطة المحددة موجودة في المسار الحالي، فاسترداد true، وإلا استرداد false

تحويل

الطريقة وصف
scale() تكبير أو تصغير الرسم الحالي
rotate() تدوير الرسم الحالي
translate() إعادة توجيه موقع (0,0) الحالي على لوحة الرسم
transform() تبديل مصفوفة التحويل الحالية للرسم
setTransform() أعادة تعيين التحويل الحالي إلى مصفوفة وحدة. ثم تشغيل transform()

النص

الخصائص وصف
font ضبط أو استرداد خصائص الخط الحالية للنص
textAlign ضبط أو استرداد الأسلوب الحالي للتوجيه النصي
textBaseline ضبط أو استرداد الأساس الحالي لرسم النص
الطريقة وصف
fillText() رسم النص المملوء على لوحة الرسم
strokeText() رسم النص على لوحة الرسم (بدون ملء)
measureText() استرداد عنصر يحتوي على عرض النص المحدد

رسم الصورة

الطريقة وصف
drawImage() رسم الصورة على لوحة الرسم أو الفيديو

عمليات البكسل

الخصائص وصف
width استرداد عرض ImageData
height استرداد طول ImageData
data استرداد عنصر يحتوي على بيانات الصورة للعنصر ImageData المحدد
الطريقة وصف
createImageData() إنشاء ImageData جديد خالي
getImageData() استرداد عنصر ImageData يحتوي على بيانات البكسل لرسم مستطيل معين على لوحة الرسم
putImageData() وضع بيانات الصورة (من العنصر ImageData المحدد) مرة أخرى على لوحة الرسم

التكوين

الخصائص وصف
globalAlpha ضبط أو استرداد القيمة الحالية لـ alpha أو الشفافية في الرسم
globalCompositeOperation ضبط أو استرداد كيفية رسم الصورة الجديدة على الصورة الموجودة مسبقًا

أخرى

الطريقة وصف
save() حفظ حالة البيئة الحالية
restore() استرداد المسار والإعدادات المسبقًا المحفوظة
createEvent() 　
getContext() 　
toDataURL()