التعليق: العرض الافتراضي وارتفاع القماش هو 300 و 150. لتجنب الاستثناءات ، من الأفضل استخدام سمات العرض لإضافتها بدلاً من استخدام CSS لإضافة العرض والارتفاع. فيما يلي مقدمة موجزة لاحتياطات استخدام قماش. يمكن للأصدقاء المهتمين الرجوع إليها. آمل أن يكون ذلك مفيدًا لك.
1. Canvas Chinese Tutorial https://developer.mozilla.org/zh-cn/docs/canvas_tutorial2. العرض الافتراضي وارتفاع القماش هو 300 و 150. لتجنب الاستثناءات ، من الأفضل استخدام سمات العرض لإضافتها بدلاً من استخدام CSS لإضافة العرض والارتفاع.
3. تعليمات لإضافة المتصفحات التي لا تدعم علامة القماش داخل علامة القماش
4. يمكنك أيضًا تحديد ما إذا كان المتصفح يدعم القماش من خلال رمز JS التالي.
var canvas = document.getElementById ('Tutorial') ؛
if (canvas.getContext) {
var ctx = canvas.getContext ('2d') ؛
// رمز الرسم هنا
} آخر {
// canvas-unsupported code هنا
}
5. القماش يدعم فقط رسم شكل أساسي واحد ، أي المستطيلات ، ولكن يمكن رسم أشكال أخرى من خلال مسار القماش.
6. هناك أربع وظائف لرسم مستطيل: Rect ، FillRect ، Strokerect و ClearRect
7. يتم استخدام وظيفة startPath لبدء طبقة مسار جديدة. إذا لم تضاف ، فهذا يعني الرسم على طبقة المسار الأصلية. آثار الرموز التالية مختلفة تمامًا. يعرض الرمز الأول سطرين أحمر ، ويظهر الرمز الثاني خطًا أسود وخطًا أحمر.
var ctx = document.getElementById ('cvs'). getContext ('2d') ؛
ctx.beginpath () ؛
CTX.Moveto (100.5،20.5) ؛
CTX.Lineto (200.5 ، 20.5) ؛
ctx.stroke () ؛
CTX.Moveto (100.5،40.5) ؛
CTX.Lineto (200.5 ، 40.5)
ctx.strokestyle = '#f00' ؛
ctx.stroke () ؛
var ctx = document.getElementById ('cvs'). getContext ('2d') ؛
ctx.beginpath () ؛
CTX.Moveto (100.5،20.5) ؛
CTX.Lineto (200.5 ، 20.5) ؛
ctx.stroke () ؛
ctx.beginpath () ؛
CTX.Moveto (100.5،40.5) ؛
CTX.Lineto (200.5 ، 40.5)
ctx.strokestyle = '#f00' ؛
ctx.stroke () ؛
8. إذا لم يكن المسار مطلوبًا للإغلاق ، فيمكن استخدام Closepath. إذا تم استخدام التعبئة ، سيتم إغلاق المسار تلقائيًا. لم تعد هناك حاجة لاستخدام ClosePath بعد الآن.
9. طالما أن لديك صبرًا كافيًا ، يمكنك استخدام منحنى Bezier لرسم أي شخصية.
10. هناك خطأ في المنحنى التربيعي تحت Firefox ، بحيث يمكن استخدام المنحنى المكعب بدلاً من المنحنى التربيعي.
11. يمكن إدخال الصور (مثل PNG ، GIF ، JPEG ، إلخ) في قماش ، ويمكن أيضًا استخدام عناصر قماش أخرى كمصدر للصورة.
12. فيما يلي رمز رسم صور Canvas الأساسي ، حيث الصورة هي الصورة أو القماش ، X و Y هي إحداثيات البداية الخاصة بهم في القماش الهدف
DrawImage (صورة ، x ، y)
يمثل الرمز التالي صورة التكبير والعرض والارتفاع تمثل حجم التكبير
DrawImage (صورة ، x ، y ، العرض ، الارتفاع)
يمثل الرمز التالي صورة لقطات. المعلمة الأولى هي نفس المعلمة الأخرى ، وكلاهما يشير إلى صورة أو قماش آخر. تمثل المعلمات الثمانية الأخرى على التوالي إحداثيات البدء X للقطع في الصورة ، والإحداثيات المبدئية للقطع في الصورة ، وعرض مساحة القطع ، وارتفاع مساحة القطع ، وتفتيت X إحداثيات الموضع المرسو صورة مرسومة.
DrawImage (Image ، SX ، SY ، Swidth ، Sneight ، DX ، DY ، DWIDTH ، DHEIGHT)
13. يتم استخدام Strokestyle لتعيين لون المخطط الرسومي ، بينما يتم استخدام FillStyle لتعيين لون التعبئة. يمكن أن يكون اللون سلسلة أو كائن تدرج أو كائن نمط يمثل قيمة لون CSS. بشكل افتراضي ، كل من ألوان الخط والملء أسود (قيمة لون CSS #000000).
14. يمكن التعبير عن شفافية الصورة بواسطة Globalalpha = قيمة الشفافية أو قيمة لون RGBA
15. خاصية عرض الخطوط العاطفية تحدد سمك الخط المرسوم الحالي. من أجل حل علة عرض خط 1 بكسل ، يتم استخدام +0.5 لحله.
16. يستخدم الخط الموجود على السطر الأيسر من سمة LinEcap المؤخرة الافتراضية. تجدر الإشارة إلى أنه يتدفق مع الخط المساعد. في الوسط هو تأثير الجولة ، ويتم إضافة نصف دائرة مع دائرة نصف قطرها نصف الخط في نقطة النهاية. على اليمين هو تأثير المربع ، مع مربع مع عرض متساو وارتفاع نصف عرض الخط المضافة في نقطة النهاية.
17. هنا أنا أيضًا أستخدم ثلاثة بوليلين كمثال لتعيين قيم ارتكاب خطوط مختلفة. الجزء العلوي هو تأثير الجولة ، يتم تقريب الحواف والزوايا ، ونصف قطر الدائرة يساوي عرض الخط. الوسط والأسفل هما آثار شطبة وميتري على التوالي. عندما تكون القيمة miter ، سيتم تمديد قطاع الخط خارج الاتصال حتى يتقاطع عند نقطة واحدة. يتم تقييد تأثير التمديد من خلال سمة miterlimit التي سيتم تقديمها أدناه
18. يتم استخدام طرق حفظ واستعادة لحفظ واستعادة حالة قماش ، وليس لديها معلمات. حالة القماش هي لقطة لجميع الأنماط والتشوهات المطبقة على الشاشة الحالية. يتم حفظ حالة القماش في شكل كومة (كومة). في كل مرة يتم استدعاء طريقة الحفظ ، سيتم دفع الحالة الحالية إلى الكومة وحفظها. في كل مرة تسمى طريقة الاستعادة ، تنبثق الحالة المحفوظة السابقة من الكومة ويتم استعادة جميع الإعدادات.
19. التحويل (1 ، 0 ، 0 ، 1 ، 0 ، 0) تمثل المعلمات التحجيم الأفقي ، الدوران الأفقي (في اتجاه عقارب الساعة) ، الدوران الرأسي (عكس اتجاه عقارب الساعة) ، التحجيم العمودي ، الإزاحة الأفقية ، الإزاحة العمودية
SetTransform (1 ، 0 ، 0 ، 1 ، 0 ، 0) يعني إعادة تعيين مصفوفة التحويل السابقة ثم بناء مصفوفة جديدة. المعلمات هي نفسها كما هو موضح أعلاه
تدوير (زاوية) ، (نصف قطر واحد يساوي 1 راديان ، 2πr/r = راديان ، أي 360 = 2π ، أي ، 1 = π/180)
20. الرسوم المتحركة هي في الواقع تطهير Artboard (ClearRect ()) ثم إعادة طلاءها