لا يمكن رسمها مباشرة في القنوات ، ويجب الحصول عليها باستخدام هذه الطريقة.
التالي.
☆ context.beginpath ()يشير إلى بدء رسم مسار جديد.
☆ context.ispointinpath (x ، y)تحديد ما إذا كانت النقطة على الطريق. لا تنطبق هذه الطريقة بعد تحويل نظام الإحداثيات.
☆ Context.moveto (x ، y)إنها تعادل رفع الفرشاة من لوحة الرسم ، وترك لوحة الرسم ، ثم وضع الطرف في
في إحداثيات (x ، y) ، ابدأ رسمًا جديدًا في هذا الموقف الجديد.
☆ context.lineto (x ، y)إنه يعادل طرف الفرشاة عدم مغادرة لوحة الرسم ، وتنتقل طرف الفرشاة من موضع التنسيق الحالي إلى
ارسم مقطع خط في الإحداثيات (x ، y).
☆ السياق. Stroke ()بعد الاعتماد على القنوات ، يجب على بعض عمليات الرسم أن تسمي هذه الطريقة للسماح للداخل بالداخل
عرض المحتوى.
☆ Context.save ()هذه الطريقة تنقذ الوضع الحالي للقواعد ، بغض النظر عن أي تغييرات على القنوات في المستقبل.
ما عليك سوى حفظ حالة القنوات قبل إجراء هذه التغييرات ويمكنك تسميتها لاحقًا
طريقة السياق. restore () تستعيد إلى الحالة المحفوظة. عادة ما يتم رسمها في قسم جديد
أو يجب حفظ الحالة الأصلية للقادم قبل تعديل العملية (لا يوجد رسم أو تغيير
) ، استعادها إلى حالتها الأصلية بعد الانتهاء من عملية سحب جديدة أو تعديل. هذا
كما أنه يفضي إلى عمليات الرسم المستقبلية.
في الواقع ، سياق بيئة الرسم 2D '2D يحتوي على العديد من الخصائص وبعض الطرق مع
تتعلق بالدولة ، يتم تغيير قيمة كل سمة (أو يتم استخدام طريقة ما لتغيير حالة الرسم) ،
تتغير حالة الرسم. إذا تم حفظها بعد كل تغيير ، فإن حالات متعددة من العقار ستفعل
احفظه في شكل مكدس ، ويمكن استدعاء الطرف Restore () عدة مرات بترتيب المكدس.
العودة إلى الدولة المحفوظة المقابلة.
☆ context.translate (x ، y)تنقل هذه الطريقة أصل الإحداثيات الحالي إلى (x ، y).
☆ context.restore ()استعادة دولة القناصة إلى آخر الدولة المحفوظة.
☆ context.closepath ()هذا الأمر متشابه جدًا في السلوك مع Lineto
وظيفة ، مع الفرق هو أن الوجهة
من المفترض تلقائيًا أن يكون
نشأة المسار. ومع ذلك ، فإن Closepath يعلم أيضا
اللوحة التي أغلقها الشكل الحالي أو تشكل أ
تحتوي على منطقة محتوية بالكامل. سيكون هذا مفيدًا للمستقبل
يملأ وينتشر.
في هذه المرحلة ، أنت حر في المتابعة مع المزيد
شرائح في طريقك لإنشاء مسارات فرعية إضافية. أو أنت
يمكن أن تبدأ في أي وقت للبدء من جديد ومسح المسار
قائمة تماما.
☆ context.fill () ؛املأ المسار المغلق بعد ضبط نمط التعبئة. لا حاجة لاستدعاء هذه الطريقة بعد تسميتها
سياق. Stroke () طريقة.
☆ context.fillRect (x ، y ، العرض ، الارتفاع)ارسم وملء المساحة المستطيلة بالعرض والطول (العرض ، الارتفاع) عند (x ، y). يُعدِّل
بعد استخدام هذه الطريقة ، لا تحتاج إلى استدعاء طريقة السياق. Stroke () مرة أخرى.
☆ context.strokerect (x ، y ، العرض ، الارتفاع)ارسم مخططًا مستطيلًا مع العرض والطول (العرض ، الارتفاع) عند (x ، y).
☆ context.clearrect (x ، y ، العرض ، الارتفاع)وضع التنظيف (الزاوية اليسرى العلوية من المستطيل) هو في (x ، y ،) ، والحجم هو (العرض ، الارتفاع)
منطقة مستطيلة.
قم بإزالة أي محتوى من المنطقة المستطيلة وإعادة ضبطه
إلى اللون الأصلي والشفاف.
القدرة على إزالة المستطيلات في القماش هي الأساسية
إنشاء الرسوم المتحركة والألعاب باستخدام API HTML5 Canvas. بواسطة
رسم وتكرار أقسام من القماش ،
من الممكن تقديم وهم الرسوم المتحركة ، والعديد
أمثلة على هذا موجود بالفعل على الويب. ومع ذلك ، ل
قم بإنشاء رسوم متحركة تؤدي بسلاسة ، ستحتاج إلى ذلك
استخدم ميزات القطع وربما حتى ثانوية
قماش مخزنة لتقليل الخفقان الناجم عن
في كثير من الأحيان Canvas مسح.
☆ context.drawimage ()تحتوي هذه الطريقة على ثلاثة أحمال زائدة لرسم الصورة على قماش. يمكن أن يكون مصدر الصورة
إطار واحد من علامة IMG في الصفحة ، كائن الصورة في JS والفيديو.
• context.drawimage (IMG ، X ، Y)
ارسم الصورة باستخدام IMG IMG في (x ، y). عندما يكون حجم القماش أكبر من الصورة
، يتم رسم الصورة بأكملها ؛ عندما تكون الصورة أكبر من القماش ، يتم اقتصاص الفائض.
• context.drawimage (IMG ، X ، Y ، W ، H)
في (x ، y) ، استخدم IMG IMG لرسم منطقة مستطيلة ذات طول وعرض (W ، H). صورة
سيتغير حجم التسلسل إلى (W ، H).
• Context.DrawImage (IMG ، IMGX ، IMGY ، IMGW ، IMGH ، CX ، CY ،
CW ، الفصل)
خذ صورة IMG ككائن رسم ، والموقف الموجود على IMG هو (IMGX ، IMGY
) يتم رسم المنطقة ذات الحجم (IMGW ، IMGH) في موضع قماش (CX ، CY)
ارسم مساحة الحجم (CW ، الفصل).
يتم طرح استثناء إذا كانت منطقة المحاصيل الموجودة على الصورة خارج نطاق الصورة.
• Context.DrawImage (Video ، VX ، VY ، VW ، VH ، CX ، CY ، CW ، CH)
خذ كائن فيديو ككائن رسم وانتزاع الموضع على الفيديو مثل (vx ، vy
) إطار ذو حجم (VW ، VH) ، يرسم كبيرًا في الموضع على القماش (CX ، CY)
المناطق مع الصغيرة (CW ، الفصل).
بالإضافة إلى ذلك ، يمكن أن تكون المعلمة الأولى من DrawImage () أيضًا قماشًا آخر.
☆ context.getimagedata (x ، y ، العرض ، الارتفاع)تحصل هذه الطريقة على الحجم (العرض ، الارتفاع) من الموضع داخل قماش (x ، y)
منطقة بكسل ، قيمة الإرجاع هي كائن Imagedata. Imagedata لها عرض ،
الارتفاع والبيانات.
سمة البيانات عبارة
، أربعة عناصر متتالية تحتوي على معلومات RGBA والشفافية بدورها. أربعة عناصر متتالية
يجب أن ينتمي البكسل إلى بكسل ، ولا يتم أخذ موضع العنصر الأول حسب الرغبة.
يتم تحديد صفيف البكسل في ترتيب قماش من أعلى إلى أسفل ومن اليسار إلى اليمين.
مسح للحصول على. عدد العناصر في صفيف البكسل هو العرض * الارتفاع * 4. للحصول على محدد
معلومات بكسل من الموقع.
إذا فتحت صفحة الويب باستخدام هذه الطريقة في وضع الملف المحلي ، فلن يكون ذلك طبيعيًا
العمل ، تحدث أخطاء الأمن عادة. يمكنك تحميل الملفات إلى
ثم يطلب خادم الويب الوصول إلى حل هذه المشكلة. والصور المعنية ، JS و
يجب أن يكون HTML من نفس اسم المجال. ومع ذلك ، يمكن الوصول إلى IE9 من خلال الملفات المحلية.
مثال على النحو التالي:
انسخ الرمز