قماش هو أداة قوية لخلق الرسومات والرسم على صفحات الويب. ومع ذلك ، بشكل افتراضي ، تستخدم اللوحة القماشية خطا قياسيا ، والذي قد لا يكون دائما مرضيا لمشاريع معينة. كيف يمكنني تغيير الخط في قماش وجعل التصميم أكثر جاذبية وفريدة من نوعها?
الخطوة الأولى هي تنزيل الخط الذي ترغب في استخدامه في مشروعك. يمكن تنزيل الخطوط من مصادر خارجية أو تكون متاحة بالفعل على الخادم الخاص بك. تحتاج إلى تحديد عنوان ورل لملف الخط في العلامة داخل قسم مستند هتمل الخاص بك.
بعد تنزيل الخط ، يمكنك تطبيقه على اللوحة القماشية باستخدام أمر الخط. على سبيل المثال ، إذا كنت ترغب في تغيير الخط إلى "أريال" وتعيين حجمه إلى 20 بكسل ، ثم يمكنك استخدام التعليمات البرمجية التالية:
كانفاسكونتيكست.الخط = "20 بكسل أريال";
الآن سيتم تغيير الخط قماش الخاص بك إلى "أريال" وسيكون حجم 20 بكسل. يمكنك أيضا إضافة خصائص خط إضافية مثل وزن الخط ونمط الخط لتغيير مظهر النص بشكل أكبر.
- العمل مع عنصر قماش
- تغيير الخط
- الخطوة 1: الحصول على السياق
- الخطوة 2: تثبيت الخط
- حجم الخط
العمل مع عنصر قماش
عنصر قماش هو منطقة مستطيلة على صفحة ويب حيث يمكنك رسم الرسومات باستخدام جافا سكريبت. قماش يمكن استخدامها لخلق صور ديناميكية وتفاعلية ، والرسومات ، والرسوم المتحركة ، وأكثر من ذلك.
لبدء العمل مع عنصر قماش ، تحتاج إلى إنشائه على الصفحة باستخدام علامة. على سبيل المثال:
هنا قمنا بتعيين معرف العنصر الفريد (معرف= "ميكانفاس") ، وكذلك عرض وارتفاع منطقة الرسم (العرض=" 500"الارتفاع="300").
- بعد إنشاء عنصر قماش ، تحتاج إلى الحصول على رابط له في جافا سكريبت. للقيام بذلك ، يمكنك استخدام خاصية كائن أو طريقة:
- كونست قماش = وثيقة.جيتليمينتبيد ('ميكانفاس');
كونست قماش = وثيقة.كيريسيليكتور ('#ميكانفاس');
بعد الحصول على إشارة إلى عنصر قماش ، يمكننا البدء في الرسم عليه. للقيام بذلك ، يتم استخدام سياق الرسم ، والتي يمكن الحصول عليها باستخدام طريقة جيتكونتيكست (). على سبيل المثال ، يتم استخدام التعليمات البرمجية التالية لرسم في 2 د:
كونست كتكس = قماش.جيتكونتيكست ('2د');الآن بعد أن أصبح لدينا سياق رسم ، يمكننا استخدام طرق وخصائص مختلفة لرسم الأشكال وتطبيق الألوان وما إلى ذلك. على سبيل المثال ، لرسم مستطيل بسيط ، يمكنك استخدام الكود التالي:
سي تي إكس.فيلستيل = 'الأحمر' ؛ / / تحديد لون التعبئة من المستطيل
سي تي إكس.فيلركت (50 ، 50 ، 100 ، 100); // ارسم مستطيلا بإحداثيات وأبعاد
- هذا مجرد مثال على إمكانيات العمل مع عنصر قماش. باستخدام جافا سكريبت والقماش ، يمكنك تنفيذ تصورات معقدة ورسوم متحركة وألعاب ، وإنشاء محتوى فريد ومثير للاهتمام على صفحات الويب.
- تغيير الخط
- يمكن تغيير الخطوط في قماش باستخدام خاصية الخط. تتيح لك هذه الخاصية تحديد نوع الخط وحجمه ومعلمات إضافية مثل التشبع ونمط الخط.
لتثبيت الخط في قماش ، استخدم بناء الجملة التالي:
السياق.الخط = "حجم الخط نمط الخط";
أين:
النمط هو معلمة اختيارية تشير إلى نوع الخط (على سبيل المثال ، "مائل" ، "غامق" ، "مائل غامق").
حجم الخط هو معلمة مطلوبة تشير إلى حجم الخط (على سبيل المثال ، "20 بكسل" ، "15 نقطة" ، "2 دقيقة").
- الخط هو معلمة اختيارية تشير إلى اسم الخط (على سبيل المثال ، "أريال" ، "فيردانا" ، "روبوتو").
- مثال الاستخدام:
السياق.الخط = "مائل غامق 20 بكسل أريال";
بعد تثبيت الخط ، يمكنك استخدامه في أوامر النص ، على سبيل المثال ، في طريقة فيلتكست:
السياق.فيلتكست(" مثال النص " ، س ، ص);
أين:
نص المثال هو النص الذي يجب عرضه.
السياق.ملء النص ("مرحبا ، العالم!", 50, 50);
الآن سيتم عرض النص في النقطة المحددة بالخط المحدد.للحصول على السياق ، نستخدم الطريقة
جيتكونتيكست()
، وهو متاح لعنصر القماش. تأخذ الطريقة وسيطة إلزامية واحدة ، وهي سلسلة تحدد نوع سياق العرض. في هذه الحالة ، سوف نستخدم السياق 2 د باستخدام القيمة"2 د".
كونست قماش = وثيقة.جيتليمنتبيد ("ميكانفاس");
كونست السياق = قماش.جيتكونتيكست ("2د");
بعد استدعاء الطريقة
جيتكونتيكست()
سيكون لدينا إمكانية الوصول إلى العديد من الطرق والخصائص التي سيتم استخدامها في الخطوات التالية لتحرير الخط والجوانب الأخرى لعنصر اللوحة القماشية.
الخطوة 2: تثبيت الخط
بعد توصيل الخط بمشروعنا ، من الضروري تثبيته للعناصر المقابلة على اللوحة القماشية. للقيام بذلك ، نستخدم خاصية الخط في سياق الرسم.
أولا ، دعنا نحدد الخط الذي نريد استخدامه. يمكننا تحديد اسم الخط وحجمه ونمطه في خاصية الخط. على سبيل المثال ، لتعيين الخط أريال مع حجم 16 بكسل ونمط منتظم ، يمكننا استخدام السطر التالي من التعليمات البرمجية:
السياق.الخط = "جريء 20 بكسل تايمز نيو رومان";
عندما نقوم بتثبيت الخط الذي نحتاجه ، يمكننا تطبيقه على العناصر الفردية للقماش. للقيام بذلك ، نستخدم طريقة فيلتكست () ، والذي يسمح لنا لكتابة النص مع الخط المحدد على قماش. على سبيل المثال ، لكتابة النص "مرحبا ، العالم!"باستخدام الخط الذي قمنا بتعيينه ، يمكننا استخدام الكود التالي:
الآن بعد أن عرفنا كيفية تثبيت الخط وتطبيقه على اللوحة القماشية ، يمكننا المضي قدما في إنشاء التصميم المطلوب ومعالجة الخط في اللوحة القماشية.
- لتغيير حجم الخط في اللوحة القماشية ، يمكنك استخدام الطريقة
- من سياق الرسم. تأخذ هذه الطريقة قيمة سلسلة تحدد حجم الخط ونمطه.
السياق.الخط = "24 نقطة فيردانا";
- يمكنك أيضا تغيير حجم الخط باستخدام الطرق
مقياس
- فونتسيزي
يأخذ قيمة رقمية تشير إلى حجم الخط بالبكسل: