الأشكال التفاعلية

قماش هو غير محتجزسطح الرسم. هذا يعني أن القماش لا يتتبع عمليات الرسم المنجزة عليه، فهو يلتقط فقط النتيجة النهائية لهذه العمليات - مجموعة من وحدات البكسل متعددة الألوان التي تشكل محتوياتها.

على سبيل المثال، إذا قمت برسم مربع أحمر في وسط اللوحة باستخدام السكتة الدماغية () أو التعبئة ()، بمجرد اكتمال هذه الطريقة، لن يصبح المربع أكثر من كتلة من وحدات البكسل الحمراء. قد يبدو لك كمربع، لكن اللوحة القماشية لا تحتوي على معلومات عنه.

هذا الأسلوب يجعل عملية الرسم أسرع، ولكنه يعقد أيضًا مهمة إنشاء الرسومات التفاعلية. لنفترض أننا بحاجة إلى تطوير نسخة أكثر ذكاءً من برنامج الرسم الذي تناولناه في مقال "إنشاء برنامج رسم بسيط". على وجه الخصوص، نريد أن يكون قادرًا على رسم المستطيلات بالإضافة إلى الخطوط. (لكن الأمر لا يزال سهلاً!)

علاوة على ذلك، لا نريد رسم المستطيلات فحسب، بل نريد أيضًا تحديد المستطيلات المرسومة وسحبها إلى موقع جديد وتغيير حجمها ولونها وما إلى ذلك. ولكن لكي ندرك كل هذه الاحتمالات، علينا أن نحل عدة مشاكل. بداية، كيف نعرف أن المستخدم قام بالنقر على المستطيل؟ بعد ذلك، كيف يمكننا معرفة كل التفاصيل المتعلقة بمستطيل معين - إحداثياته ​​وحجمه ومخططه التفصيلي ولون تعبئته؟ وأخيرًا، كيف يمكننا معرفة تفاصيل جميع الأشكال الأخرى الموجودة على القماش؟ ما الذي نحتاج إلى معرفته إذا أردنا تغيير المستطيل وتحديث اللوحة القماشية؟

لحل كل هذه المشكلات وجعل اللوحة القماشية تفاعلية، نحتاج إلى تتبع جميع الكائنات التي نرسمها عليها. وبعد ذلك، عندما ينقر المستخدم في أي مكان على اللوحة القماشية، يتعين عليك تحديد ما إذا كان قد ضرب أحد الأشكال أم لا. هذه العملية تسمى اختبار الضرب. إذا تمكنا من حل هاتين المشكلتين، فسيكون حل الباقي - تعديل الشكل وتحديث اللوحة القماشية وفقًا لذلك - أمرًا سهلاً.

تتبع المحتوى المرسوم

من أجل تغيير وتحديث محتوى اللوحة، نحتاج إلى الحصول على جميع المعلومات حول هذا المحتوى. خذ على سبيل المثال برنامجًا تفاعليًا لرسم الدوائر، تظهر نافذته في الشكل:

للتبسيط، يقوم البرنامج فقط برسم دوائر فردية ذات أحجام وألوان مختلفة. لتتبع دائرة فردية، نحتاج إلى معرفة موقعها على اللوحة القماشية (أي إحداثيات المركز)، ونصف القطر، ولون التعبئة. بدلاً من إنشاء العشرات من المتغيرات لتخزين كل هذه المعلومات، تحتاج إلى تخزين أربعة أنواع من البيانات في حزمة واحدة مدمجة. هذه الحزمة ستكون كائن مخصص.

لنفكر في إنشاء كائن مخصص في حالة عدم اضطرارك إلى تنفيذ هذا الإجراء القياسي من قبل. أولاً، نقوم بإنشاء دالة باسم يعكس نوع الكائن الخاص بنا. على سبيل المثال، يمكن أن تسمى وظيفة إنشاء كائن مخصص لرسم دائرة بـ Circle():

دائرة الوظائف() ()

نريد أن يكون كائننا قادرًا على تخزين البيانات. يتم ذلك عن طريق إنشاء خصائص باستخدام الكلمة الأساسية هذه. على سبيل المثال، لتحديد خاصية نصف القطر لكائن دائرة، يمكنك تعيين قيمة للتعبير this.radius.

يمكنك المضي قدمًا وتمرير المعلمات إلى وظيفة Circle(). بهذه الطريقة، يتم إنشاء كائن دائرة وتعيين خصائصه في خطوة واحدة. التعليمة البرمجية التالية هي مثال لوظيفة Circle() التي تسمح لك بتعيين المعلمات:

// وظيفة كائن الدائرة المخصصة Circle(x, y, radius, color) ( this.x = x; this.y = y; this.radius = radius; this.color = color; this.isSelected = false; )

يتم تقييم الخاصية isSelected إلى صواب أو خطأ. عندما ينقر المستخدم على دائرة، يتم تعيين الخاصية isSelected إلى true، بحيث يعرف رمز الرسم أنه يرسم مسارًا مختلفًا لتلك الدائرة.

يمكن إنشاء كائن دائرة باستخدام هذا الإصدار من وظيفة Circle() باستخدام رمز مثل هذا:

var myCircle = new Circle(0, 0, 20, "red");

الفكرة الكاملة لإنشاء برنامج لرسم الدوائر هي أنه لا يمكنك رسم دائرة واحدة فقط، بل العديد من الدوائر التي تريدها. هذا يعني أن كائن دائرة واحدًا فقط لن يكون كافيًا، ونحن بحاجة إلى إنشاء مصفوفة لتخزين جميع الدوائر. في هذا المثال، يقوم المتغير العام التالي بتنفيذ هذه المهمة:

// يقوم هذا المصفوفة بتخزين جميع الدوائر الموجودة على اللوحة var Circles = ;

الكود المتبقي واضح ومباشر. عندما ينقر المستخدم على زر "إضافة دائرة" لإنشاء دائرة جديدة، يتم استدعاء الدالة addRandomCircle()، والتي تنشئ دائرة جديدة بحجم ولون عشوائيين في موقع عشوائي على اللوحة القماشية:

الوظيفة addRandomCircle() ( // تعيين حجم وموضع عشوائي للدائرة var radius = RandomFromTo(10, 60); var x = RandomFromTo(0, Canvas.width); var y = RandomFromTo(0, Canvas.height); // دائرة الألوان بأي لون varcolors = ["green"، "blue"، "red"، "yellow"، "magenta"، "orange"، "brown"، "purple"، "pink"]; / إنشاء دائرة جديدة var Circle = new Circle(x, y, radius, color);

يستخدم الكود دالة مخصصة RandomFromTo()، والتي تولد أرقامًا عشوائية في نطاق معين:

الدالة RandomFromTo(from, to) ( return Math.floor(Math.random() * (to - from + 1) + from); )

ستكون الخطوة الأخيرة في هذا التسلسل هي الرسم الفعلي لمجموعة الدوائر الحالية على القماش. للقيام بذلك، بعد إنشاء دائرة جديدة، تستدعي الدالة addRandomCircle() الدالة drawCircles()، والتي بدورها تتكرر عبر مصفوفة الدوائر باستخدام الكود التالي:

الدالة drawCircles() ( // امسح القماش context.clearRect(0, 0, Canvas.width, Canvas.height); // قم بالتكرار عبر جميع الدوائر for(var i=0; i=0; i--) ( varدائرة = دوائر[i]; // باستخدام نظرية فيثاغورس، احسب المسافة من // النقطة التي تم النقر عليها إلى مركز الدائرة الحالية var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2)) // تحديد ما إذا كانت النقطة التي تم النقر عليها موجودة في هذه الدائرة إذا (distanceFromCenter)

يمكن تحسين هذا المثال بعدة طرق مختلفة لجعله أكثر ذكاءً. على سبيل المثال، يمكنك إضافة شريط أدوات يحتوي على أوامر لتحرير الدائرة المحددة لتغيير لونها أو إزالتها من اللوحة القماشية. أو يمكنك إضافة القدرة على سحب الدائرة المحددة من مكان على اللوحة القماشية إلى مكان آخر. للقيام بذلك، تحتاج ببساطة إلى مراقبة اللوحة القماشية لحدث onMouseMove، وتغيير إحداثيات الدائرة وفقًا لذلك، ثم استدعاء وظيفة drawCircles() لتحديث اللوحة القماشية بالدائرة في الموقع الجديد:

Window.onload = function() ( // تحديد سياق الرسم Canvas = document.getElementById("drawingCanvas"); context = Canvas.getContext("2d"); Canvas.onmousedown = CanvasClick; Canvas.onmouseup = stopDraging; Canvas. onmouseout = stopDraging;

لتلخيص ذلك، يمكننا أن نقول ما يلي: إن تتبع الكائنات المرسومة يمنح المطور مرونة غير محدودة لتحريرها وعرضها في المستقبل.

اليوم سأخبرك كيف يعمل القماش في html5؟ وسأقدم أمثلة، على الأقل زوجين. Canvas هي علامة يمكنك من خلالها رسم أشكال مختلفة باستخدام جافا سكريبت. يعد هذا أحد ابتكارات html5 وسأخبركم قليلاً عنه الآن.

التحضير للرسم

لبدء الإنشاء، تحتاج إلى إنشاء اللوحة القماشية نفسها وربط البرنامج النصي بها أيضًا.

نشير إلى أبعاد اللوحة القماشية، بالإضافة إلى المعرف. إنه ضروري لربط اللوحة القماشية بالبرنامج النصي، وهو ما سنفعله الآن:

فار الحقل = document.getElementById("field").getContext("2d");

لنكتب هذا السطر إلى متغير الحقل، وسيسمح لك بالرسم داخل اللوحة القماشية باستخدام طرق مختلفة. والآن يمكننا الانتقال إلى محاولة الرسم. للراحة، سأجعل خلفية اللوحة القماشية صفراء، وليس بيضاء، بحيث تكون جميع المسافات البادئة مرئية بوضوح.

قماش (الخلفية: أصفر؛)

مثال 1 - مستطيل بدون تعبئة

الآن لدينا متغير حقل وباستخدام طرق مختلفة يمكننا الرسم داخل حاوية القماش. في البداية، يمكنك ضبط سمك الخط، وكذلك لونه، ويتم ذلك باستخدام الخطوط التالية:
field.lineWidth = 4؛
field.strokeStyle = "#173045";

عظيم، تم تعيين المعلمات. الآن من المهم بالنسبة لنا أن نفهم كيف يحدث الرسم فعليًا. يحدث ذلك وفقًا لهذا المبدأ: يوجد إحداثي x، يبدأ في بداية اللوحة القماشية ويتحرك إلى اليمين، ويوجد أيضًا إحداثي y، ويبدأ أيضًا في بداية الحاوية، ولكنه ينخفض. لمساعدتك على فهم هذا بشكل أفضل، انظر إلى هذه الصورة:

وكيف يتم رسم المستطيل؟ يتم تعيين الإزاحة دائمًا على طول الإحداثي x أولاً، ثم على طول الإحداثي y. بعد تعيين هذا الموضع الأولي، تحتاج فقط إلى تحديد عرض المستطيل وارتفاعه. أولا العرض، ثم الارتفاع. دعونا ننظر:
field.strokeRect(80, 90, 120, 70);
نتيجة:

هنا المعلمة الأولى بين قوسين هي إزاحة x، والثانية هي إزاحة y، والثالثة هي العرض، والرابعة هي الارتفاع. هذا كل شيء، تذكر هذا بما يكفي لرسم المستطيلات.

مثال 2 - مستطيل مع تعبئة

في هذه الحالة، يتم كل شيء بنفس الطريقة، ويتغير اسم الطريقة فقط:
field.fillStyle = "#173045";
field.fillRect(50, 50, 130, 85);
تتيح لك طريقة fillStyle تحديد لون التعبئة. لقد قمت بحذف المستطيل السابق في الوقت الحالي، ويبدو المستطيل الجديد كما يلي:


كما ترون، تم تعيين كافة المعلمات الأربعة في نفس التسلسل. إذا قمت بتعيين القيمتين الأوليين على الصفر، فسيتم رسم المستطيل في الزاوية اليسرى العليا من اللوحة القماشية.

مثال 3 - الأشكال الخطية والمعقدة

كما تفهم، فإن الطرق الموضحة أعلاه ليست مناسبة لإنشاء أشكال معقدة. لنرسم مثلثًا على القماش. هذا ليس صعبا كما قد يبدو للوهلة الأولى.
هناك حاجة إلى طريقة beginPath () للإشارة إلى بداية رسم شكل عشوائي. تقوم طريقة moveTo() بتعيين إحداثيات البداية للرسم. كما تفهم، فإنه يحتوي على معلمتين - إحداثيات x وy. هذا يعني أنه للتحضير لرسم شكل معقد، فإنك تحتاج إلى سطور التعليمات البرمجية التالية:
field.beginPath();
field.moveTo(30, 30);

على سبيل المثال، سأبدأ برسم مثلث من نقطة 30 بكسل إلى يمين وأسفل الزاوية العلوية اليسرى من اللوحة. يتم الرسم باستخدام الخطوط، طريقة lineTo():

Field.beginPath(); field.moveTo(30, 30); field.lineTo(150, 100); field.lineTo(250, 30); field. ClosePath(); field.lineWidth = 3; field.strokeStyle = "فضي" field.stroke();

لقد قمت بتجميع الكثير من التعليمات البرمجية هنا، ولكن الآن سأشرح كل شيء أثناء النظر إلى النتيجة:

كما ترون، إنه مثلث تمامًا. لقد رسمنا خطًا من نقطة البداية إلى نقطة النهاية، والتي تقع عند الإحداثيات المحددة: 150 بكسل من بداية اللوحة القماشية على طول المحور x، و100 بكسل من البداية على طول المحور y. جميع الإحداثيات مرتبطة بالحافة العلوية اليسرى من اللوحة، وليس حيث ينتهي الخط. تذكر هذا، لأنه يسهل الفهم على الفور ويمكنك بالفعل تخيل النتيجة في رأسك.

في الواقع، تكمل طريقة ClosePath() رسم الشكل الذي نشير إليه بعد السطر الأخير المرسوم. معلمات أخرى:
عرض الخط = 3؛ - سمك الخط 3 بكسل؛
StrokeStyle = "فضي"; — لون الخط فضي؛
سكتة دماغية()؛ - انتباه! بدون هذه الطريقة، في النهاية لن تظهر خطوطنا ولن يكون المثلث مرئيًا. ولذلك، فإننا بالتأكيد تسجيله.

حسنًا، هذه كل الأمثلة في الوقت الحالي. آمل أن يكونوا قد ساعدوك في التعرف على أساسيات الرسم بلغة html5. لأي استفسار اكتب في التعليقات.

مساء الخير أيها القراء الأعزاء.

اذا هيا بنا نبدأ!

ما هو القماش ولماذا هو مطلوب؟

قماش (قماش) هو عنصر HTML5 لإنشاء صورة نقطية ثنائية الأبعاد. تستخدم عادة بالتزامن مع جافا سكريبت.

يمكن تغيير عرض وارتفاع اللوحة القماشية.

يتم استخدامه بشكل أساسي لرسم الرسومات وعناصر اللعبة في ألعاب المتصفح وإدراج مقاطع الفيديو وإنشاء مشغل كامل.

يتم استخدام Canvas أيضًا في WebGL لتسريع الأجهزة للرسومات ثلاثية الأبعاد. ونتيجة لذلك، يمكنك إنشاء ألعاب ثلاثية الأبعاد يتم تشغيلها في نافذة المتصفح.

إنشاء قماشنا Canvas يظهر النص إذا كان العنصر غير مدعوم var Canvas = document.getElementById("test"); var ctx = Canvas.getContext("2d"); /* يرسم مخططًا مستطيلًا عبر عرض اللوحة القماشية وارتفاعها بالكامل */ ctx.strokeRect(0, 0, Canvas.width, Canvas.height);

يتم إنشاء اللوحة القماشية ببساطة عن طريق إدراج علامة في كود html. بعد ذلك، من خلال جافا سكريبت العادية، نحصل على عنصر اللوحة القماشية ومحتواها (السطر 10، 11) ونرسم مستطيلًا محددًا يمتد على كامل عرض اللوحة القماشية وارتفاعها.

البدائيون في قماش

في قماش يمكنك رسم عناصر هندسية مثل:

المستطيلات

خطوط

الدوائر والأقواس

منحنيات مختلفة، القطع الناقص

المستطيلات

أبسط شكل للقماش هو المستطيل. لرسمه نحتاج فقط إلى سطر واحد من التعليمات البرمجية.

StrokeRect(x, y, width, height); // مستطيل فارغ بحد

هناك خياران إضافيان لرسم المستطيلات:

fillRect(x, y, width, height) // مستطيل معبأ ClearRect(x, y, width, height) // امسح المنطقة على اللوحة القماشية كمستطيل بحجم معين

فيما يلي مثال لاستخدام هاتين الطريقتين:

Ctx.fillRect(0, 0, Canvas.width, Canvas.height); ctx.clearRect(50, 50, 300, 200); // قطع المستطيل

ونتيجة لذلك، قمنا برسم مستطيل أسود كبير وقطعنا مساحة من النقطة (50، 50) يبلغ عرضها 300 بكسل وارتفاعها 200 بكسل. أدناه هو ما سيبدو عليه.

مثال أكثر إثارة للاهتمام:

Ctx.strokeRect(5, 5, 138, 138); ctx.fillRect(10, 10, 128, 128); ل (ط = 0؛ ط