يمكن أن ترسم القماش العديد من الأنماط الرائعة والآثار الجميلة.
عند الطلاء ، تكون القماش مكافئًا للأقمشة ، والسياق يعادل الفرش.
1. ارسم الخطوطMoveto (x0 ، y0): حرك الفرشاة الحالية (ICTX) إلى هذا الموضع (x0 ، y0).
Lineto (x1 ، y1): ارسم خطًا مستقيمًا من الموضع الحالي (x0 ، y0) إلى (x1 ، y1).
BeginPath (): افتح مسارًا أو إعادة ضبط المسار الحالي.
Closepath (): العودة إلى نقطة انطلاق المسار من النقطة الحالية ، أي موضع البداية السابقة وتجنب ومسار.
السكتة الدماغية (): رسم. يجب إضافة هذه الوظيفة لرسم الصور ، لذلك يجب وضع هذا في النهاية.
var icanvas () ؛
تأثير:
لاحظ هنا أنه إذا تم وضع Closepath خلف وظيفة السكتة الدماغية ، فلن يتم رسمه إلى خط مغلق ، لأنه يتم رسمه قبل الإغلاق ، لذلك لن يتم رسم الخط المستقيم على اليسار.
2. نمط الخطLinecap: نمط نقطة النهاية ، بعقب ، راند ، مربع.
Linejoin: نمط نقطة التحول عندما يتقاطع الخطين.
ميتيرليميت: إذا كان طول الرواسب يتجاوز قيمة miterlimit ، فسيتم عرض الزاوية في النوع المائل للضغط.
عرض الخط: عرض الخط
Strokestyle: لون الخط ، التدرج (كائن التدرج المحدد) ، الوضع. context.strokify =#333 ؛
var icanvas ، 10) ؛ قطري أسود مرة أخرى ، ما مجموعه 3 خطوط. ictx.strokestyle =#000000 ؛
لا يمكن أن يظهر BeginPath و Closepath في أزواج.
3. منحنى رسمARC (X ، Y ، نصف قطرها ، بداية ، ENDANGLE ، مضاد للعرض): منحنى السحب ، دائرة نصف قطرها نصف قطر المنحنى ، بداية الزاوية ، زاوية بداية الوهمة وزاوية النهاية ، مع القوس (Math.PI/180) أغراض
ARCTO (X1 ، Y1 ، X2 ، Y2 ، RADIUS): ارسم المنحنى قبل الخطين المقطوعين.
ictx.beginpath () ictx.moveto (20،20) / إنشاء أقواس ictx.lineto (150،120) ؛
ارسم اتصال نقطة البداية ونقطة النهاية الأفقية للخط الأفقي إلى نقطة نهاية إعداد الخط الأفقي.
QuadraticCurveto (x1 ، y1 ، x2 ، y2): منحنى bessel. (x1 ، y1) إحداثيات نقطة التحكم ، (x2 ، y2) إحداثيات نقطة النهاية
Beziercurveto (X1 ، Y1 ، X2 ، Y2 ، X ، Y): Three Bessel Curves. (x1 ، y1) إحداثيات نقطة التحكم 1 ، (x2 ، y2) إحداثيات نقطة التحكم 2 نقاط نهاية (x ، y).
منحنى Bessel مفيد جدًا عند رسم بعض المنحنيات السلسة للغاية.
4. ارسم المستطيل والملءRect (): إنشاء المستطيل ؛
Filect (x ، y ، العرض ، الارتفاع): ارسم المستطيل المملوء: (x ، y) نقطة البداية ، العرض ، الارتفاع مستطيل الارتفاع ارتفاع الارتفاع ارتفاع الارتفاع
strokerect (): ارسم إطار سلك مستطيل
واضحة (): مسح المستطيل.
ICTX.FillStyle =#0000FF ؛5. سمة القلم
FillStyle: اضبط اللون أو التدرج أو النمط (Patten) ؛
Strokestyle: اللون ، التدرج أو نمط الفرشاة
6. ارسم الظلShadowColor: Shadow Yanse
Shadowblur: مستوى غير واضح
Shadowoffsetx: المسافة الأفقية من الظل
Shadowoffsety: المسافة العمودية للظل
ictx.shadowblur = 20 ؛7. رسم التدرج
Createlineargradient (X1 ، Y1 ، X2 ، Y2): رسم التدرج الخطي ، (X1 ، Y1) هو نقطة انطلاق التدرج ، (x2 ، y2) هي نقطة الانتحال.
CreaterAdialGradient (x1 ، y1 ، r1 ، x2 ، y2 ، r2): التدرج الشعاعي: (x1 ، y1) هي نقطة انطلاق التدرج ، R1 هو نصف القطر ، (x2 ، y2) هي نقطة نهاية التدرج ، r2 هو نصف قطر نقطة النهاية.
يجب استخدام كلتا الدرجتين
تم تعيين AddColorsStop (توقف ، لون) لتعيين عملية التدرج ، والقيمة تتراوح بين 0.0 إلى 1.0.
var grd = ictx.createlearadient (0،0،170،0) ؛ ) (200،150،150،100) ؛8. املأ الخلفية
CreatePattern (صورة ، كرر | REPER-X | REFERT-Y | NODEPEAT): الصورة كائن صورة ، ويتم استخدام المعلمات اللاحقة لتعيين الطريقة المتكررة للصورة.
9. واجهات برمجة التطبيقات الأخرى ذات الصلةملء (): املأ المسار الحالي.
isPointInpath (): ictx.ispointinpath (x ، y) ؛
قم بإزالة القماش: احصل على عرض وارتفاع القماش ، icanvas.
تعديل عرض القماش: icanvas.width = '200' ؛
GlobalPha: قم بتعيين الشفافية ، فقط 0 ~ 1.
TODATAURL: ICANVAS.TODATAURL (النوع ، encderoptions) ، تُرجع هذه الوظيفة URI من صورة 64 في الصورة ، وتتوفر المعلمات ، والكتب يمكن أن تضع أنواع الصور مثل Image/JPEG ، Image/WebP ، الافتراضي هو صورة/P Default NG ؛ هو رقم 0 ~ 1 يتم استخدامه لتعيين جودة صورة الصورة/JPEG ، الصورة/WebP ، واكتب بتنسيقات أخرى تعيين هذه المعلمة غير صالحة.
10. الكنزClip (): قماش من أي شكل وحجم من القماش ، ثم جميع الرسومات سوف تقتصر على منطقة الخياطة. عادة ما تستخدم هذه الطريقة مع مسارات مثل الأشكال المستطيلة ، بعد هذه الطرق ، يتم قطع هذه الصورة لاحقًا على قماش القص.
ictx.arc (100،100،50 ، (Math.PI/180) 0 ، (Math.PI/180) ؛
إذا كنت لا تزال ترغب في تشغيل اللوحة الخارجية ، فاستخدم وظيفة Save () للحفظ قبل القطع ، واستخدم وظيفة الاستعادة () لاستعادة الحالة المحفوظة مسبقًا بعد القطع ، لكن العملية في الوسط لن تختفي.
ما سبق هو كل محتويات هذا المقال.