التعليق: قماش يعني القماش. على الرغم من أن الجميع يطلقون على القماش علامة جديدة لـ HTML5 ، إلا أنه يبدو أن القماش ينتمي إلى المعرفة الجديدة بلغة HTML ، في الواقع ، يتم إجراء رسم قماش من خلال JavaScript. لذا ، إذا كنت ترغب في تعلم رسم قماش ، فيجب أن يكون لديك مؤسسة JavaScript
على الرغم من أن الجميع يطلقون على القماش علامة جديدة لـ HTML5 ، يبدو أن القماش ينتمي إلى المعرفة الجديدة بلغة HTML ، في الواقع ، يتم رسم قماش من خلال JavaScript. لذا ، إذا كنت ترغب في تعلم رسم قماش ، فيجب أن يكون لديك مؤسسة JavaScript.بالإضافة إلى ذلك ، عند رسم الصور ، هناك دائمًا بعض المصطلحات ونقاط المعرفة في الصور ، لذلك إذا كان لديك خبرة في صنع الصور أو الفن ، فسيكون من الأسهل تعلم القماش.
قماش يعني قماش. القماش في HTML5 يشبه حقًا القماش في الحياة الحقيقية. لذلك ، فإن رؤيته كقماش ملموس يمكن أن تسرع الفهم.
قماش
للرسم باستخدام قماش ، أولاً وقبل كل شيء ، تحتاج إلى وجود قماش. إذا لم يكن لديك قماش في رف الكتب الخاص بك ، فيمكنك شراء لفة ووضعها. بالطبع ، لا نحتاج إلى إنفاق الأموال على صفحة الويب ، فقط كتابة قماش ، على غرار:
<Canvas> لا يدعم متصفحك القماش </canvas>
النص الموجود في العلامة مخصص للمتصفحات التي لا تدعم القماش ، ولن يكون المدعومون أبدًا مرئيين.
ملاحظة: من الضروري ذكر خصائص هذه القماش. مثل IMG ، له سمتان أصليتان ، وهما العرض والارتفاع. في الوقت نفسه ، لأنه عنصر HTML أيضًا ، يمكنه أيضًا استخدام CSS لتحديد العرض والارتفاع. ومع ذلك ، تأكد من ملاحظة أن عرضه وارتفاعه يختلفان عن العرض والارتفاع المحدد من خلال CSS!
نستخدم JS لتغيير العرض الأصلي وارتفاع القماش ، مثل هذا:
canvas.width = 400
Canvas.Height = 300
ولكن باستخدام JS لتغيير عرض وارتفاع القماش عن طريق تشغيل CSS ، فإنه مثل هذا:
canvas.style.width = '400px'
canvas.style.height = '300px'
يمكن ملاحظة أن الفرق النحوي واضح للغاية. في الواقع ، الفرق أكثر وضوحا.
ما هو الفرق بينهما؟
على سبيل المثال ، بالنسبة إلى قماش 1000 ، يمكنك رسم خط رأسي على الجانب الأيسر من القماش ، عرض 100 بكسل. في هذا الوقت ، قمت بتعيين عرض القماش نفسه على 500 ، وهو ما يعادل النقر فوق النصف الأيمن من القماش ، ولكن في هذا الوقت لا يزال عرض الخط العمودي 100.
ولكن إذا كنت تستخدم CSS لتغيير عرض القماش إلى 500 ، فإنه يعادل بثق القماش من 1000 إلى 500 ، وبالتالي يصبح عرض الخط العمودي 50.
(هذا مجرد موقف نظري. عند تحديد عرض القماش الأصلي فعليًا ، سيتم مسح المحتوى المرسوم.)
يعد عرض القماش الخاص وارتفاعه سمات اللوحة نفسها ، ويمكن اعتبار العرض والارتفاع المقدم من CSS تحجيمًا. إذا قمت بتوسيع نطاقها بشكل عرضي ، فقد تصبح الرسومات الموجودة على القماش غير معروفة لك.
لذلك هناك اقتراح: ما لم تكن في ظروف خاصة ، لا تستخدم CSS لتحديد عرض وارتفاع القماش.
القماش لديه ، والآن نخرجه:
var cvs = document.getElementById ('cvs') ؛
انظر ، إنه بالضبط مثل الحصول على عناصر أخرى.
فرشاة
الآن بعد أن أصبحت القماش متوفرة بالفعل ، أريد أن أتعامل معها ، بالطبع أحتاج أيضًا إلى قلم. طريقة الحصول على قلم هي كما يلي:
var ctx = cvs.getContext ('2d') ؛
يتم استخدام طريقة getContext لعقد قلم ، ولكن هناك معلمة أخرى هنا: 2D. ماذا يعني هذا؟ يمكن اعتبار هذا نوعًا من الفرشاة.
بما أن هناك ثنائي الأبعاد ، ثم سيكون هناك ثلاثية الأبعاد؟ ربما سيكون هناك بعض في المستقبل ، ولكن ليس الآن. لذلك دعونا نستخدم هذا القلم ثنائي الأبعاد أولاً.
! إذن ، هل يمكننا وضع عدد قليل من الأقلام لتجنيبها؟ الجواب لا.
أريد أن أطرح سؤالاً: كم عدد الأقلام التي تستخدمها في نفس الوقت عند رسم الصور؟ أعتقد أن 99.9 ٪ من الناس يمكنهم استخدام واحد فقط. على الرغم من أن بعض أسياد فنون القتال مثل Xiaolongnu يمكنهم الرسم بكلتا يديه في نفس الوقت ، إلا أن هذا غير واقعي للغاية بالنسبة للأشخاص العاديين ، أليس كذلك؟
حتى الآن يمكنك أن تشعر بالارتياح لأن علامة HTML5 Canvas تدعم أيضًا فقط باستخدام قلم واحد في نفس الوقت!
قد يرغب بعض الطلاب الذين هم على دراية بـ JS في أن يكونوا ذكيين: أستخدم طريقة الحصول على الفرشاة بالطريقة السابقة للحصول على عدد قليل من الأقلام ، ألا يكون ذلك كافيًا؟ !
على سبيل المثال:
var con = cvs.getContext ('2d') ؛
var ctx = cvs.getContext ('2d') ؛
ههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههههلا اعتقدت ذلك قبل الاختبار ، ولكن في الواقع ، هذا مجرد وهم!
لأنني وجدت أنني غمست واحدة من الأقلام بالحبر الأحمر ، كما تم غمر القلم الآخر تلقائيًا في الحبر الأحمر! لأن الأقلام واحدة! اللعنة.
إذا كنت بحاجة إلى رسم ألوان مختلفة ، فإن الطريق هو الحفاظ على غمس هذا القلم الفريد بلون جديد.
هذه في الواقع ليست ميزة ، إنها عيب ، وسوف تجربها في المستقبل.
تنسيق
العالم 2D هو طائرة. لتحديد نقطة على متن الطائرة ، مطلوب قيمتان ، X-coordinates و y-coordinates. هذا مفهوم أساسي مهم للغاية ، لكن بما أن الجميع قد تعلموا الرياضيات ، فلن أتحدث عنه كثيرًا.
أصل القماش هو الزاوية العلوية اليسرى ، نفس الفلاش. ولكن الأمر المزعج للغاية هو أن الأصل في الرياضيات هو الزاوية اليسرى السفلى. هذا...
آخر
تحتوي Canvas على ميزة مختلفة عن القماش الحقيقي ، وهو أنه شفاف افتراضيًا وليس له لون خلفية. هذا مهم للغاية معظم الوقت.