أحدث البرامج التعليمية وتطوير الشبكة
 

HTML قماش المرجعي

❮ السابق التالي المرجعي ❯

وصف

وHTML5 <canvas> يستخدم كلمة دلالية لرسم الرسومات، على الطاير، عن طريق البرمجة (جافا سكريبت عادة).

ومع ذلك، فإن <canvas> عنصر لا يوجد لديه قدرات رسم من تلقاء نفسها (أنها ليست سوى وعاء للرسومات) - يجب استخدام برنامج نصي لرسم الواقع الرسومات.

و getContext() الأسلوب بإرجاع كائن التي توفر أساليب وخصائص لرسم على القماش.

وهذه الإشارة تغطي خصائص وأساليب getContext("2d") الكائن، والتي يمكن أن تستخدم لرسم النص والخطوط والمربعات والدوائر ووأكثر - على القماش.

دعم المتصفح

الأرقام في الجدول تحدد أول نسخة متصفح يدعم تماما العنصر.

العنصر
<canvas> 4.0 تسعة 2.0 3.1 تسعة

إنترنت إكسبلورر 9، فايرفوكس، أوبرا، وكروم، ودعم سفاري <canvas> وخصائصه وأساليب.

ملاحظة: إنترنت إكسبلورر 8 والإصدارات السابقة، لا تدعم <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() عودة صحيح إذا كانت نقطة محددة هي في المسار الحالي، كاذبة غير ذلك

التحولات

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

نص

الملكية وصف
font مجموعات أو إرجاع خصائص الخط الحالية لمحتوى النص
textAlign مجموعات أو إرجاع محاذاة الحالية لمحتوى النص
textBaseline مجموعات أو عوائد استخدام خط الأساس النص الحالي عند وضع النص

طريقة وصف
fillText() توجه "شغل" النص على قماش
strokeText() توجه النص على القماش (بدون تعبئة)
measureText() بإرجاع الكائن الذي يحتوي على عرض النص المحدد

رسم صورة

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

بكسل التلاعب

الملكية وصف
width ترجع عرض كائن ImageData
height يعود ارتفاع كائن ImageData
data بإرجاع كائن يحتوي على بيانات الصورة من كائن ImageData محدد

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

التركيب

الملكية وصف
globalAlpha مجموعات أو إرجاع قيمة ألفا أو الشفافية الحالية من الرسم
globalCompositeOperation مجموعات أو عوائد كيف يتم رسم صورة جديدة على صورة موجودة

آخر

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


❮ السابق التالي المرجعي ❯