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

كائن HTML DOM قماش

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

كائن قماش

كائن قماش هو جديد في HTML5.

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

الوصول إلى كائن قماش

يمكنك الوصول إلى <canvas> عنصر باستخدام getElementById() :

مثال

var x = document.getElementById("myCanvas");
انها محاولة لنفسك »

إنشاء كائن قماش

يمكنك إنشاء <canvas> العنصر باستخدام document. createElement() document. createElement() الأسلوب:

مثال

var x = document.createElement("CANVAS");
انها محاولة لنفسك »

ملاحظة: <canvas> عنصر لا يوجد لديه قدرات رسم من تلقاء نفسها (أنها ليست سوى وعاء للرسومات) - يجب استخدام برنامج نصي لرسم الواقع الرسومات.

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

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

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

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

أنماط الخط

خاصية وصف
lineCap مجموعات أو إرجاع أسلوب قبعات نهاية للحصول على خط
lineJoin مجموعات أو إرجاع نوع الركنية، عندما يلتقي خطين
lineWidth مجموعات أو إرجاع عرض الخط الحالي
miterLimit مجموعات أو إرجاع الحد الأقصى لطول ميتري

المستطيلات

طريقة وصف
rect() يخلق المستطيل
fillRect() يرسم "filled" المستطيل
strokeRect() يرسم المستطيل (no fill)
clearRect() مسح بكسل معينة داخل المستطيل معين

مسارات

طريقة وصف
fill() يملأ الرسم الحالي (path)
stroke() توجه في الواقع مسار عرفتها
beginPath() يبدأ المسار، أو إعادة تعيين المسار الحالي
moveTo() يتحرك المسار إلى نقطة محددة في قماش، دون إنشاء خط
closePath() يخلق المسار من النقطة الحالية مرة أخرى إلى نقطة البداية
lineTo() يضيف نقطة جديدة ويخلق خط من تلك النقطة إلى نقطة محددة الأخيرة في قماش
clip() مقاطع منطقة من أي الشكل والحجم من القماش الأصلي
quadraticCurveTo() يخلق منحنى بيزيه من الدرجة الثانية
bezierCurveTo() يخلق منحنى بيزيه مكعب
arc() يخلق قوس / منحنى (used to create circles, or parts of circles)
arcTo() يخلق قوس / منحنى بين الظلال
isPointInPath() عرض true إذا كانت نقطة محددة هي في المسار الحالي، كاذبة غير ذلك

التحولات

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

نص

خاصية وصف
font مجموعات أو إرجاع خصائص الخط الحالية لمحتوى النص
textAlign مجموعات أو إرجاع محاذاة الحالية لمحتوى النص
textBaseline مجموعات أو عوائد استخدام خط الأساس النص الحالي عند وضع النص
طريقة وصف
fillText() توجه "filled" النص على قماش
strokeText() توجه النص على القماش (no fill)
measureText() بإرجاع الكائن الذي يحتوي على عرض النص المحدد

رسم صورة

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

بكسل التلاعب

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

التركيب

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

آخر

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

خصائص وأحداث القياسية

كما يدعم الكائن قماش القياسية الخصائص و الأحداث .

صفحات ذات صلة

HTML البرنامج التعليمي: HTML5 قماش

إشارة HTML: HTML <canvas> العلامة


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