الحالة في لوحة الرسم في HTML5

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

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

مثال على حالة رسم الـ HTML5 Canvas

طريقة دفع وإزالة الحالات للتصميم هي:

context.save(); // دفع حالة واحدة إلى حجم الحالات.
context.restore(); // إزالة الحالة الأحدث من الحجم وإعادة تعيينها إلى سياق 2d.

بعد أن يتم حفظها في الحجم، يمكنك دفع عدة��态 إلى هذا الحجم ثم إزالتها. هذا مثال برمجي:

<canvas id="ex1" width="500" height="100" style="border: 1px solid #cccccc;">الرسم البياني HTML5 غير مدعوم</canvas>
<script>
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");
context.fillStyle = "#66ff66";
context.strokeStyle = "#990000";
context.lineWidth = 5;
context.fillRect(5, 5, 50, 50);
context.strokeRect(5, 5, 50, 50);
context.save();
context.fillStyle = "#6666ff";
context.fillRect(65, 5, 50, 50);
context.strokeRect(65, 5, 50, 50);
context.save();
context.strokeStyle = "#000099";
context.fillRect(125, 5, 50, 50);
context.strokeRect(125, 5, 50, 50);
context.restore();
context.fillRect(185, 5, 50, 50);
context.strokeRect(185, 5, 50, 50);
context.restore();
context.fillRect(245, 5, 50, 50);
context.strokeRect(245, 5, 50, 50);
</script>

هذا هو نتيجة الكود المذكور أعلاه عند الرسم على اللوحة:

فوائد دليل الحالة

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

ما هي��态 السياق الثنائي؟

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

• fillStyle

• font

• globalAlpha

• globalCompositionOperation

• lineCap

• lineJoin

• lineWidth

• miterLimit

• shadowBlur

• shadowColor

• shadowOffsetX

• shadowOffsetY

• strokeStyle

• strokeStyle

• textAlign

• textBaseline
  

• منطقة التقليم

• مatriceة التحويل (من خلال rotate() + دوران + انتقال setTransform())

هذه القائمة ليست شاملة. مع تطور المعايير، قد تصبح خصائص أكثر جزءًا من حالة سياق الـ2D.