Canvas HTML5 ، برنامج تعليمي للمبتدئين

تقدم مواصفات HTML5 العديد من الميزات الجديدة ، وهي واحدة من أكثر الميزات إثارة هي عنصر القماش. يوفر HTML 5 Canvas طريقة لرسم الرسومات من خلال JavaScript ، وهو أمر سهل الاستخدام ولكنه قوي. كل عنصر من عناصر القماش لديه سياق (سياق) (فكر كصفحة على لوحة رسم) حيث يمكن رسم أي شكل. يدعم المتصفح سياقات قماش متعددة ويوفر قدرات رسم رسومية من خلال واجهات برمجة التطبيقات المختلفة. تدعم معظم المتصفحات سياقات القماش ثنائية الأبعاد - بما في ذلك الأوبرا والفلاروكس والكونيرور و Safari. بالإضافة إلى ذلك ، تدعم بعض إصدارات الأوبرا أيضًا قماشًا ثلاثي الأبعاد ، ويمكن لـ Firefox أيضًا دعم القماش ثلاثي الأبعاد من خلال المكونات الإضافية.

تقدم هذه المقالة أساسيات القماش ثنائي الأبعاد وكيفية استخدام وظائف اللوحة الأساسية مثل الخطوط والأشكال والصور والنص. لفهم هذا المقال ، من الأفضل أن تفهم أساسيات JavaScript.

يمكنك النقر هنا لتنزيل رمز المثال في هذه المقالة على دفعات

أساسيات القماش:

طريقة إنشاء قماش بسيطة ، تحتاج فقط إلى إضافة عنصر <Canvas> إلى صفحة HTML:

<canvas id = عرض mycanvas = 300 ارتفاع = 150>

محتوى العودة ، في حالة عدم دعم المستعرض القماش.

</canvas>

للإشارة إلى العناصر في JavaScript ، من الأفضل تعيين معرف العنصر ؛ تحتاج أيضًا إلى ضبط ارتفاع وعرض قماش.

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

// الحصول على إشارة إلى العنصر.

var elem = document.getElementById ('mycanvas') ؛

// تحقق دائمًا من الحصول على الخصائص والأساليب ، للتأكد من عدم كسر الكود الخاص بك

// في متصفحات أخرى.

if (elem && elem.getContext) {

// الحصول على سياق 2D.

// تذكر: يمكنك تهيئة سياق واحد فقط لكل عنصر.

var context = elem.getContext ('2d') ؛

إذا (السياق) {

// لقد انتهيت! الآن يمكنك رسم المستطيل الأول.

// تحتاج فقط إلى توفير إحداثيات (x ، y) ، تليها العرض و

// أبعاد الارتفاع.

context.fillRect (0 ، 0 ، 150 ، 100) ؛

}

}

يمكنك وضع الرمز أعلاه في الجزء الرئيسي من المستند ، أو في ملف خارجي.

2D Context API:

بعد تقديم كيفية إنشاء قماش ، دعنا نلقي نظرة على واجهة برمجة تطبيقات Canvas ثنائية الأبعاد لمعرفة ما يمكن القيام به مع هذه الوظائف.

الخطوط الأساسية:

يوضح المثال أعلاه مدى سهولة رسم مستطيل.

يمكن تعيين خصائص FillStyle و Strokestyle بسهولة لملء المستطيل والخطوط. يتم استخدام قيمة اللون كما هو الحال مع CSS: Numbercimal Number و RGB () و RGBA () و HSLA. يمكن استخدام FillRect لرسم مستطيل مع FillRect. استخدم strokerect لرسم مستطيلات مع الحدود فقط ولا تعبئة. إذا كنت ترغب في مسح بعض اللوحات القماشية ، فيمكنك استخدام ClistRect. معلمات الطرق الثلاثة المذكورة أعلاه هي نفسها: x ، y ، العرض ، الارتفاع. قم بتعيين المعلمتين الأوليين على إحداثيات (x ، y) ، وضبط المعلمتان الأخيرتان ارتفاع وعرض المستطيل. يمكنك استخدام خاصية عرض الخط لتغيير سمك الخط. دعونا نلقي نظرة على الأمثلة باستخدام FillRect و Strokerect ClearRect وغيرها:

conext.fillStyle = '#00f' ؛ // أزرق

context.strokestyle = '#f00' ؛ // أحمر

context.linewidth = 4 ؛

// ارسم بعض المستطيلات.

context.fillRect (0 ، 0 ، 150 ، 50) ؛

Context.StrokEct (0 ، 60 ، 150 ، 50) ؛

context.clearrect (30 ، 25 ، 90 ، 60) ؛

Context.StrokEct (30 ، 25 ، 90 ، 60) ؛

يظهر هذا المثال في الشكل التالي:

طريق:

يمكن رسم الأشكال التعسفية عبر مسار القماش (المسار). يمكنك رسم المخطط التفصيلي أولاً ، ثم رسم الحدود والملء. يعد إنشاء شكل مخصص بسيطًا ، وابدأ في الرسم باستخدام BeginPath () ثم ارسم شخصيتك بخطوط مستقيمة ومنحنيات ورسومات أخرى. بعد الرسم ، ملء المكالمات والسكتة الدماغية لإضافة الحدود أو تعيين الحدود. استدعاء Call ClosePath () لإنهاء الرسم الرسومي المخصص. فيما يلي مثال على رسم مثلث:

// تعيين خصائص النمط.

conext.fillStyle = '#00f' ؛

context.strokestyle = '#f00' ؛

context.linewidth = 4 ؛

context.beginPath () ؛

// ابدأ من نقطة اليسار العلوية.

context.moveto (10 ، 10) ؛ // إعطاء إحداثيات (x ، y)

context.lineto (100 ، 10) ؛

context.lineto (10 ، 100) ؛

context.lineto (10 ، 10) ؛

// منتهي! الآن املأ الشكل ، ورسم السكتة الدماغية.

// ملاحظة: لن يكون شكلك مرئيًا حتى تتصل بأي من الطريقتين.

context.fill () ؛

سياق. ضربة () ؛

context.closepath () ؛

تظهر الاداءات في الشكل التالي:

مثال آخر أكثر تعقيدًا يستخدم الخطوط المستقيمة والمنحنيات والأقواس.

أدخل الصورة:

تتيح طريقة DrawImage إدخال صور أخرى (عناصر IMG و Canvas) في قماش. في الأوبرا ، يمكنك رسم رسومات SVG في قماش. هذه الطريقة أكثر تعقيدًا ويمكن أن تحتوي على 3 أو 5 أو 9 معلمات

3 المعلمات: الطريقة الأساسية لاستخدام DrawImage. تحدد إحدى المعلمات موضع الصورة ، وتحدد المعلمتان الأخريان موضع الصورة في قماش.

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

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

فيما يلي ثلاثة أمثلة لطرق الاستخدام المذكورة أعلاه:

// ثلاث وسيطات: الإحداثيات العنصر ، الوجهة (x ، y).

context.drawImage (img_elem ، dx ، dy) ؛

// خمس وسيطات: العنصر ، الإحداثيات المقصودة (x ، y) ، والوجهة

// العرض والارتفاع (إذا كنت تريد تغيير حجم الصورة المصدر).

context.drawImage (img_elem ، dx ، dy ، dw ، dh) ؛

// تسع وسيطات: الإحداثيات العنصر ، المصدر (x ، y) ، عرض المصدر و

// الارتفاع (للاقتصاص) ، والإحداثيات المقصودة (x ، y) ، وعرض الوجهة

// والارتفاع (تغيير الحجم).

context.drawImage (img_elem ، sx ، sy ، sw ، sh ، dx ، dy ، dw ، dh) ؛

يظهر التأثير في الشكل أدناه:

عملية مستوى البكسل:

يوفر واجهة برمجة تطبيقات Context 2D ثلاث طرق لعمليات مستوى البكسل: CreateImagedata ، GetImagedata ، و Putimagedata. يحفظ كائن Imagedata قيمة البيكسل للصورة. يحتوي كل كائن على ثلاث خصائص: العرض والارتفاع والبيانات. نوع سمة البيانات هو canvaspixelarray ، والذي يتم استخدامه لتخزين العرض*ارتفاع*4 بكسل قيم. كل بكسل لديه قيمة RGB وقيمة ألفا الشفافية (قيمها من 0 إلى 255 ، بما في ذلك ألفا!). يتم تخزين ترتيب وحدات البكسل من اليسار إلى اليمين ، من أعلى إلى أسفل ، حسب الصف. لفهم مبدأها بشكل أفضل ، دعونا نلقي نظرة على مثال - ارسم مستطيلًا أحمر:

// إنشاء كائن Imagedata.

var imgd = context.createimagedata (50،50) ؛

var pix = imgd.data ؛

// حلقة على كل بكسل وتعيين أحمر شفاف.

لـ (var i = 0 ؛ n = pix.length ، i <n ؛ i += 4) {

بيكس [i] = 255 ؛ // القناة الحمراء

PIX [i+3] = 127 ؛ // قناة ألفا

}

// ارسم كائن Imagedata في إحداثيات (x ، y) المحددة.

context.putimagedata (imgd ، 0،0) ؛

ملاحظة: لا تنفذ جميع المتصفحات CreateMagedata. في المتصفحات المدعومة ، يجب الحصول على كائن Imagedata من خلال طريقة GetImagedata. يرجى الرجوع إلى رمز العينة.

يمكن استخدام Imagedata لإكمال العديد من الوظائف. على سبيل المثال ، يمكن تنفيذ مرشحات الصور ، أو يمكن تنفيذ التصورات الرياضية (مثل الفركتات والمؤثرات الخاصة الأخرى). المؤثرات الخاصة التالية تنفذ مرشح انعكاس بالألوان البسيط:

// احصل على canvaspixelarray من الإحداثيات والأبعاد المحددة.

var imgd = context.getimagedata (x ، y ، width ، height) ؛

var pix = imgd.data ؛

// حلقة على كل بكسل وانعكاس اللون.

لـ (var i = 0 ، n = pix.length ؛ i <n ؛ i += 4) {

Pix [i] = 255 - pix [i] ؛ // أحمر

PIX [i+1] = 255 - pix [i+1] ؛ // أخضر

PIX [i+2] = 255 - pix [i+2] ؛ // أزرق

// i+3 هو ألفا (العنصر الرابع)

}

// ارسم imagedata في إحداثيات (x ، y) المعطاة.

context.putimagedata (imgd ، x ، y) ؛

يوضح الشكل التالي التأثير بعد استخدام هذا المرشح:

كلمة:

على الرغم من أن إصدار WebKit الأخير و Firefox 3.1 Nightly Build قد بدأان للتو في دعم API النص ، من أجل ضمان سلامة المقالة ، قررت أن أظل تقديم API النص هنا.

يمكن تعيين خصائص النص التالية في كائن السياق:

الخط: خط نص ، مثل سمة العائلة CSSFONT

TextAlign: نص محاذاة أفقية. قيم السمة المرغوبة: ابدأ ، نهاية ، يسار ، يمين ، المركز. القيمة الافتراضية: ابدأ.

TextBaseline: المحاذاة العمودية للنص. قيم السمة المرغوبة: أعلى ، شنقا ، وسط ، أبجدي ، فكرة ، أسفل. القيمة الافتراضية: الأبجدية

هناك طريقتان لرسم النص: FillText و Stroketext. يرسم النص الأول مع ملء ملء ، يرسم الأخير النص مع حدود Strokestyle فقط. معلمات كلاهما هي نفسها: النص المراد رسمه وإحداثيات الموضع (x ، y) للنص. هناك أيضًا خيار اختياري - أقصى عرض. إذا لزم الأمر ، فإن المتصفح يقلل من النص لتناسب العرض المحدد. تؤثر سمة محاذاة النص على الموضع النسبي للنص إلى إحداثيات المجموعة (x ، y).

فيما يلي مثال على رسم النص Hello World في قماش:

conext.fillStyle = '#00f' ؛

context.font = 'Italic 30px sans-serif' ؛

context.textBaseline = 'top' ؛

context.fillText ('Hello World!' ، 0 ، 0) ؛

context.font = 'Bold 30px sans-serif' ؛

context.stroketext ('Hello World!' ، 0 ، 50) ؛

الصورة التالية هي تقديمها:

الظل:

حاليا فقط konqueror و firefox 3.1 البناء الليلي دعم واجهة برمجة تطبيقات Shadows. خصائص واجهة برمجة التطبيقات هي:

ShadowColor: لون الظل. قيمتها تتفق مع قيمة لون CSS.

Shadowblur: يضع درجة طمس الظل. أكبر هذه القيمة ، وأكثر ضبابية الظل. تأثيره هو نفس مرشح فوتوشوب غاوس غامض.

Shadowoffsetx و Shadowoffsety: إزاحة X و Y من الظل ، بالبكسل.

فيما يلي مثال على ظل القماش:

context.shadowoffsetx = 5 ؛

context.shadowoffsety = 5 ؛

context.shadowblur = 4 ؛

context.shadowColor = 'rgba (255 ، 0 ، 0 ، 0.5)' ؛

conext.fillStyle = '#00f' ؛

context.fillRect (20 ، 20 ، 150 ، 100) ؛

يظهر التأثير في الشكل أدناه:

تدرج اللون:

بالإضافة إلى ألوان CSS ، يمكن ضبط خصائص FillStyle و Strokestyle على كائنات CanvaSgradient. -يمكن استخدام التدرجات ذات اللون للخطوط والملء عبر CanvaSgradient. لإنشاء كائن CanvaSgradient ، يمكنك استخدام طريقتين: CreateLineArgradient و CreaterAdialGradient. السابق يخلق تدرج اللون الخطي ، ويخلق الأخير تدرج اللون الدائري. بعد إنشاء كائن تدرج ملون ، يمكنك استخدام طريقة AddColorStop للكائن لإضافة قيم متوسطة اللون. يوضح الرمز التالي كيفية استخدام تدرجات الألوان:

// تحتاج إلى توفير إحداثيات المصدر والوجهة (X ، Y)

// للتدرج (من حيث يبدأ وأين ينتهي).

var gradient1 = context.createlineargradient (sx ، sy ، dx ، dy) ؛

// الآن يمكنك إضافة ألوان في التدرج الخاص بك.

// تحكي الوسيطة الأولى موقف اللون في التدرج الخاص بك. ال

// نطاق القيمة المقبول من 0 (بدء التدرج) إلى 1 (نهاية التدرج).

// تحكي الوسيطة الثانية اللون الذي تريده ، باستخدام تنسيق ألوان CSS.

Gradient1.AddColorStop (0 ، '#f00') ؛ // أحمر

Gradient1.AddColorStop (0.5 ، '#ff0') ؛ // أصفر

Gradient1.AddColorStop (1 ، '#00f') ؛ // أزرق

// للحصول على التدرج الشعاعي تحتاج أيضًا إلى توفير المصدر

// ودائرة الوجهة دائرة نصف قطرها.

// تحدد إحداثيات (x ، y) نقاط مركز الدائرة (البدء و

// وجهة).

var gradient2 = context.createDialGradient (SX ، SY ، SR ، DX ، DY ، DR) ؛

// إضافة الألوان إلى التدرج الشعاعي هو نفسه إضافة الألوان إلى الخطية

// التدرجات.

لقد قمت أيضًا بإعداد مثال أكثر تعقيدًا باستخدام التدرجات والظلال والنص الخطي.

يظهر التأثير في الشكل أدناه:

عرض القماش:

إذا كنت تريد معرفة ما يمكنك فعله باستخدام القماش ، فيرجى الرجوع إلى المشروع التالي:

أداة الأوبرا:

سيماكاريوم

كراسة رسم الفنان

spirograph

الهندسة والتوضيح عبر الإنترنت:

نيوتن متعدد الحدود

Canvascape - 3D Walker

Paint.web - عرض العرض ، مفتوح المصدر

رحلة ملعب النجوم

انقطاع تفاعلي

القسم الفرعي:

Canvas هي واحدة من أكثر الميزات المتوقعة لـ HTML 5 ويدعمها حاليًا معظم متصفحات الويب. يمكن أن تساعد القماش في إنشاء ألعاب وتعزيز واجهات المستخدم الرسومية. سياق 2D

يوفر واجهة برمجة التطبيقات الكثير من إمكانيات رسم الرسومات - آمل أن تكون قد تعلمت استخدام القماش من خلال هذه المقالة وأنت مهتم بمعرفة المزيد!