تقدم هذه المقالة بشكل أساسي 24 ملخص المعرفة الأساسي للقماش ، وهو أمر شامل ومفصل للغاية ، ويوصى به للجميع.
لخص الآن نقاط المعرفة من القماش على النحو التالي بحيث يمكن قراءتها في أي وقت.
1. املأ مستطيل التعبئة (x ، y ، العرض ، الارتفاع) ؛ 2. ارسم مستطيل الحدود strokerect (x ، y ، العرض ، الارتفاع) ؛ 3. محو المستطيل واضح (x ، y ، العرض ، الارتفاع) ؛ 4. FillStyle = Red ؛ يمكن أن يكون النمط اللون والتدرج والصورة. 5. Strokestyle = أحمر ؛ 6. عرض خط خط السكتة الدماغية = 4 ؛ 7. شكل نهاية الخط linecap = بعقب ؛ بعقب (إرساء)/جولة (دائرة)/مربعة (مربعة) ، افتراضيًا فهو بعقب ؛ 8. خط تقاطع نمط الخط = miter ؛ ميتري (زاوية حادة)/مستدير (زاوية مستديرة)/شطبة (زاوية شطبة) ، زاوية حادة افتراضية ؛ 9. ابدأ في رسم المسار beginpath () ؛ 10. إنهاء المسار Closepath () ؛ بعد إنشاء المسار ، إذا كنت ترغب في رسم خط متصل بنقطة انطلاق المسار ، فيمكنك استدعاء ClosePath () ؛ 11. ارسم قوس قوس (X ، Y ، نصف قطر ، البداية ، ENDANGLE ، TRUE/FALSE) ؛ 12. ارسم Arc Arcto (X1 ، Y1 ، X2 ، Y2 ، RADIUS) في رسم قوس ليوم واحد من النقطة السابقة ، حتى X2 ، Y2 ، ويمر عبر X1 ، Y1 مع نصف القطر المعطى ؛ 13. Moveto (x ، y) ؛ انقل مؤشر الرسم إلى (x ، y) ، دون خطوط الرسم 14. Lineto (x ، y) ؛ ارسم خطًا مستقيمًا من النقطة السابقة 15. منحنى بيزيير التربيعي: QuadraticCurveto (CX ، CY ، X ، Y) ؛ ابدأ في رسم المنحنى التربيعي من النقطة السابقة ، حتى تعمل x و y و cx و cy كنقطة تحكم. 16. منحنى Bezier المكعب : Beziercurveto (Cx1 ، Cy1 ، Cx2 ، Cy2 ، X ، Y) ؛ ابدأ في رسم المنحنى التربيعي من النقطة السابقة ، حتى يتم استخدام X و Y و Cx1 و Cy1 و Cx2 ، Cy2 كنقاط تحكم. 17. المستقيم (x ، y ، العرض ، الارتفاع) ؛ تبدأ من النقاط X و Y والعرض والارتفاع حسب العرض والارتفاع على التوالي. هذه الطريقة ترسم مسار مستطيل ، وليس شكل منفصل. 18. ارسم النص:(1) ملء النص: FillText (Hello ، X ، Y ، Width) ؛ العرض هو الحد الأقصى للبكسل الاختياري. إذا كان النص أكبر من الحد الأقصى للعرض ، فسيتقلص النص لاستيعاب الحد الأقصى للعرض.
(2) نص دماغية: Stroketext (Hello ، X ، Y ، Width) ؛ العرض هو عرض البكسل الحد الأقصى الاختياري.
(3) نمط النص: الخط = Bold 14px Arial ؛
(4) محاذاة النص الأفقي: textalign = 'start' ؛ // start ، end ، يسار ، يمين ، الوسط. القيمة الافتراضية: ابدأ. قم بمحاذاة المحور العمودي مع نقطة البداية (x ، y) للنص كنقطة أساسية.
(5) محاذاة النص العمودي: TextBaseline = 'الأبجدي "؛ // TOP ، تعليق ، متوسط ، الأبجدية ، IdeaGraphic ، أسفل. القيمة الافتراضية: الأبجدية. قم بمحاذاة المحور الأفقي مع نقطة البداية (x ، y) للنص كنقطة أساسية.
(6) عرض النص: var text = hello ؛ var length = context.measureText (text) ؛ نص المعلمة هو النص الذي يجب رسمه
19. التغيير
(1) تدوير (زاوية): تدوير زاوية راديان الصورة حول الأصل.
يمكنك أيضًا استخدام Transform (math.cos (angle*math.pi/180) ، math.sin (angle*math.pi/180) ،-math.sin (angle*math.pi/180) ، math.cos (angle*math.pi/180) ، 0،0) ؛
(2) المقياس (x ، y): قم بتوسيع نطاق الصورة. يمكنك أيضًا استخدام التحويل (x ، 0،0 ، y ، 0،0) ؛
(3) ترجمة (x ، y): انقل أصل الإحداثي إلى x ، y. بعد إجراء هذا التحول ، ستصبح الإحداثيات 0 و 0 النقطة التي يمثلها x ، y من قبل. يمكنك أيضًا استخدام التحويل (1،0،0،1 ، x ، y) ؛
(4) Transform (<mumber> ، <number> ، <mumber> ، <mumber> ، <mumber> ، x ، y) ؛
(5) setTransform (<mumber> ، <mumber> ، <mumber> ، <mumber> ، x ، y) ؛ أعد تعيين مصفوفة التحويل إلى الحالة الافتراضية ، ثم استدعاء تحويل () ؛
20. مزيج الرسوم انسخ الرمز