على الرغم من أن الجميع يطلقون على القماش علامة جديدة لـ HTML5/"> HTML5 ، يبدو أن القماش ينتمي إلى المعرفة الجديدة بلغة HTML ، ولكن في الواقع ، يتم رسم قماش من خلال JavaScript. لذلك ، إذا كنت ترغب في تعلم رسم قماش ، فيجب أن يكون لديك أساس JavaScript.
بالإضافة إلى ذلك ، عند رسم الصور ، هناك دائمًا بعض المصطلحات ونقاط المعرفة في الصور ، لذلك إذا كان لديك خبرة في صنع الصور أو الفن ، فسيكون من الأسهل تعلم القماش.
قماش يعني قماش. القماش في HTML5 يشبه حقًا القماش في الحياة الحقيقية. لذلك ، فإن رؤيته كقماش ملموس يمكن أن تسرع الفهم.
قماشللرسم باستخدام قماش ، أولاً وقبل كل شيء ، تحتاج إلى وجود قماش. إذا لم يكن لديك قماش في رف الكتب الخاص بك ، فيمكنك شراء لفة ووضعها. بالطبع ، لا نحتاج إلى إنفاق الأموال على صفحة الويب ، فقط كتابة قماش ، على غرار:
<canvas id = "cvs"> لا يدعم متصفحك القماش <//canvas>
النص الموجود في العلامة مخصص للمتصفحات التي لا تدعم القماش ، ولن يكون المدعومون أبدًا مرئيين.
من الضروري أن نذكر خصائص هذه القماش. له سمتان أصليان ، وهما العرض والارتفاع. في الوقت نفسه ، لأنه عنصر 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. هذا مفهوم أساسي مهم للغاية.
أصل القماش هو الزاوية العلوية اليسرى ، نفس الفلاش. ولكن الأمر المزعج للغاية هو أن الأصل في الرياضيات هو الزاوية اليسرى السفلى. هذا...
بعض المعرفة الأساسية حول الرسمبادئ ذي بدء ، تحتاج إلى معرفة نوع التغييرات الإحداثي التي سترسم ما هي الخطوط؟ على سبيل المثال ، إذا أصبح إحداثيات X أكبر وبقيت إحداثيات Y دون تغيير ، يمكن رسم خط أفقي ؛ إذا تغيرت إحداثيات Y لكن الإحداثيات X لم يتغير ، فيمكن رسم الخط الرأسي.
بالطبع ، هناك أيضًا خطوط قطرية ، وخطوط قطرية اليسار والخطوط القطرية اليمنى. إذا تمكنت من مقارنة الصور ، يمكن لمعظم الناس فهمها مرة واحدة ؛ من المعتاد أكثر من الاكتئاب بالرمز ، ويمكنك فقط التفكير في ذلك من خلال التفكير المنطقي.
إذا كنت تشعر بالارتباك حيال الخطوط الآن ، فلا تقلق ، فستفهمها بشكل طبيعي أثناء عملية التعلم.
آخرتحتوي Canvas على ميزة مختلفة عن القماش الحقيقي ، وهو أنه شفاف افتراضيًا وليس له لون خلفية. هذا مهم للغاية معظم الوقت.