5 تقدم المواصفات العديد من الميزات الجديدة ، واحدة من أكثر الميزات إثارة هي عنصر canvas . يوفر HTML5 canvas طريقة لرسم الرسوم البيانية عبر JavaScript ، وهو أمر سهل الاستخدام ولكنه قوي. كل عنصر من عناصر canvas لديه سياق (سياق) (فكر كصفحة على لوحة الرسم) حيث يمكن رسم أي شكل. يدعم المتصفح سياقات قماش متعددة ويوفر وظائف رسم رسومية من خلال وظائف مختلفة. يوفر وظيفة الرسم الرسومية. 5 تقدم المواصفات العديد من الميزات الجديدة ، واحدة من أكثر الميزات إثارة هي العناصر. يوفر HTML5 طريقة لرسم الرسومات من خلال JavaScript ، وهو أمر سهل الاستخدام ولكنه قوي. كل عنصر له سياق (سياق) (فكر كصفحة على لوحة رسم) حيث يمكن رسم أي شكل. يدعم المتصفح سياقات قماش متعددة ويوفر وظائف رسم رسومية من خلال وظائف مختلفة.
تدعم معظم المتصفحات سياقات القماش ثنائية الأبعاد - بما في ذلك الأوبرا والفلاروكس والكونيرور و Safari. بالإضافة إلى ذلك ، تدعم بعض إصدارات الأوبرا أيضًا قماشًا ثلاثي الأبعاد ، ويمكن لـ Firefox أيضًا دعم القماش ثلاثي الأبعاد من خلال المكونات الإضافية:
مقالة السياق
تقدم هذه المقالة قماش ثنائي الأبعاد
الأساسيات وكيفية استخدام وظائف اللوحة الأساسية مثل الخطوط والأشكال والصور والنص. لفهم هذا المقال ، من الأفضل أن تفهم أساسيات JavaScript.
يمكنك النقر هنا لتنزيل رمز المثال في هذه المقالة على دفعات
طريقة إنشاء قماش بسيطة للغاية ، تحتاج فقط إلى إضافة عنصر <canvas> إلى صفحة HTML:
<canvas id=mycanvas width=300 height=150>fallback content, in case the browser does not support canvas.</canvas>من أجل أن تكون قادرًا على الرجوع إلى العناصر في JavaScript ، من الأفضل تعيين المعرف للعنصر ؛ كما يحتاج إلى ضبط الارتفاع والعرض للقماش.
بمجرد إنشاء قماش ، دعنا نعد الفرشاة. لرسم رسم بياني في قماش ، تحتاج إلى استخدام JavaScript. ابحث أولاً عن قماش من خلال وظيفة getelementbyid
عنصر ، ثم تهيئة السياق. يمكن رسم الرسومات المختلفة لاحقًا باستخدام API Context. يرسم البرنامج النصي التالي مستطيلًا في قماش (انقر هنا لعرض التأثير):
// get a reference to the element.var elem = document.getelementbyid('mycanvas');// always check for properties 和methods, to make sure your code doesn't break // in other browsers.if (elem && elem.getcontext) { // get the 2d context. // remember: you can only initialize one context per element. var context = elem.getcontext('2d'); if (context) { // you are done! now you can draw your first rectangle. // you only need to provide the (x,y) coordinates, followed by the width and // height dimensions. context.fillrect(0, 0, 150, 100); }} يمكنك وضع الرمز أعلاه في الجزء head من المستند ، أو في ملف خارجي.
بعد تقديم كيفية إنشاء قماش ، دعنا نلقي نظرة على API Canvas ثنائي الأبعاد ونرى ما يمكن القيام به مع هذه الوظائف.
يوضح المثال أعلاه مدى سهولة رسم مستطيل.
يمكن تعيين خصائص FillStyle و Strokestyle بسهولة لملء المستطيل والخطوط. طريقة استخدام قيمة اللون والرقم السداسي عشري ، () ، () و () (إذا كان المتصفح يدعمها ، مثل الأوبرا
10 و Firefox 3). () (إذا كان المتصفح يدعمه ، مثل Opera10 و Firefox 3). () و () (إذا كان المتصفح يدعمه ، مثل Opera10 و Firefox 3). () و () و () (إذا كان المتصفح يدعمه ، مثل Opera10 و Firefox 3). الأرقام السداسية ، () ، () و () (إذا كان مدعومًا من المتصفح ، مثل Opera10 و Firefox 3).
يمكن استخدام fillrect لرسم مستطيل التعبئة. استخدم strokerect لرسم مستطيلات مع الحدود فقط ولا تعبئة. إذا كنت ترغب في مسح بعض اللوحات القماشية ، فيمكنك استخدام clearrect . معلمات الطرق الثلاثة المذكورة أعلاه هي نفسها: x ، y ، العرض ، الارتفاع . قم بتعيين المعلمتين الأوليين على إحداثيات (x ، y) ، وضبط المعلمتان الأخيرتان ارتفاع وعرض المستطيل.
يمكنك استخدام سمة عرض الخط لتغيير سمك الخط. دعونا نرى ما إذا كان fillrect يستخدم ،
strokerect clearrect وغيرها من الأمثلة:
context.fillstyle = '#00f'; // bluecontext.strokestyle = '#f00'; // redcontext.linewidth = 4;// draw some rectangles.context.fillrect (0, 0, 150, 50);context.strokerect(0, 60, 150, 50);context.clearrect (30, 25, 90, 60);context.strokerect(30, 25, 90, 60);يظهر هذا المثال العرض في الشكل 1.
الشكل 1: FillRect ، strokerect و
مخطط تأثير واضح
يمكن رسم الأشكال التعسفية عبر مسار القماش (المسار). يمكنك رسم المخطط التفصيلي أولاً ، ثم رسم الحدود والملء. يعد إنشاء شكل مخصص بسيطًا ، وابدأ في الرسم باستخدام beginpath() ثم ارسم شخصيتك بخطوط مستقيمة ومنحنيات ورسومات أخرى. بعد الرسم ، fill المكالمات والسكتة stroke لإضافة الحدود أو تعيين الحدود. استدعاء Call closepath() لإنهاء الرسم الرسومي المخصص.
فيما يلي مثال على رسم مثلث:
// set the style properties.context.fillstyle = '#00f';context.strokestyle = '#f00';context.linewidth = 4;context.beginpath();// start from the top-left point.context.moveto(10, 10); // give the (x,y) coordinatescontext.lineto(100, 10);context.lineto(10, 100);context.lineto(10, 10);// done! now fill the shape, 和draw the stroke.// note: your shape will not be visible until you call any of the two methods.context.fill();context.stroke();context.closepath();تظهر الاداءات في الشكل 2.
الشكل 2: مثلث
مثال آخر أكثر مسؤولية يستخدم الخطوط المستقيمة والمنحنيات والأقواس.
تتيح طريقة drawimage إدخال صور أخرى في قماش
(عناصر img و canvas ). في المشغل ، يمكنك رسم رسومات SVG في قماش. هذه الطريقة معقدة للغاية ويمكن أن تحتوي على 3 أو 5 أو 9 معلمات:
drawimage . تحدد إحدى المعلمات موضع الصورة ، وتحدد المعلمتان الأخريان موضع الصورة في قماش.drawimage الوسيطة ، بما في ذلك المعلمات الثلاثة المذكورة أعلاه ، أضف معلمتين للإشارة إلى عرض صورة الإدراج والارتفاع (إذا كنت تريد تغيير حجم الصورة).drawimage الأكثر تعقيدًا ، بما في ذلك المعلمات 5 أعلاه ، والمعلمات 4 الأخرى تضع الموضع وعرض الارتفاع في الصورة المصدر. تتيح لك هذه المعلمات أن تقطع صورة المصدر ديناميكيًا قبل عرضها.فيما يلي ثلاثة أمثلة لطرق الاستخدام المذكورة أعلاه:
// three arguments: the element, destination (x,y) coordinates.context.drawimage( img_elem , dx , dy );// five arguments: the element, destination (x,y) coordinates, and destination // width and height (if you want to resize the source image).context.drawimage( img_elem , dx , dy , dw , dh );// nine arguments: the element, source (x,y) coordinates, source width and // height (for cropping), destination (x,y) coordinates, and destination width // and height (resize).context.drawimage( img_elem , sx , sy , sw , sh , dx , dy , dw , dh );يظهر التأثير في الشكل 3.
الشكل 3: عرض drawimage .
يوفر واجهة برمجة تطبيقات Context 2D ثلاث طرق لعمليات مستوى البكسل: createimagedata ، getimagedata ، و
putimagedata .
يحفظ كائن imagedata قيمة البيكسل للصورة. يحتوي كل كائن على ثلاث خصائص: العرض والارتفاع و
بيانات . نوع سمة البيانات هو canvaspixelarray ، والذي يتم استخدامه لتخزين width * height *4 بكسل قيم. كل بكسل لديه قيمة RGB وقيمة ألفا الشفافية (قيمتها هي 0 إلى
255 ، بما في ذلك ألفا!). يتم تخزين ترتيب وحدات البكسل من اليسار إلى اليمين ، من أعلى إلى أسفل ، حسب الصف.
لفهم مبدأها بشكل أفضل ، دعونا نلقي نظرة على مثال - رسم مستطيل أحمر
// create an imagedata object.var imgd = context.createimagedata(50,50);var pix = imgd.data;// loop over each pixel 和set a transparent red.for (var i = 0; n = pix.length, i < n; i += 4) { pix[i ] = 255; // red channel pix[i+3] = 127; // alpha channel}// draw the imagedata object at the given (x,y) coordinates.context.putimagedata(imgd, 0,0); ملاحظة: لا تنفذ جميع المتصفحات createimagedata . في المتصفحات المدعومة ، يجب الحصول على كائن imagedata من خلال طريقة getimagedata . يرجى الرجوع إلى رمز العينة.
يمكن تحقيق العديد من الوظائف من خلال imagedata . على سبيل المثال ، يمكن تنفيذ مرشحات الصور ، أو يمكن تنفيذ التصورات الرياضية (مثل الفركتات والمؤثرات الخاصة الأخرى). المؤثرات الخاصة التالية تنفذ مرشح انعكاس بالألوان البسيط:
// get the canvaspixelarray from the given coordinates and dimensions.var imgd = context.getimagedata( x , y , width , height );var pix = imgd.data;// loop over each pixel and invert the color.for (var i = 0, n = pix.length; i < n; i += 4) { pix[i ] = 255 - pix[i ]; // red pix[i+1] = 255 - pix[i+1]; // green pix[i+2] = 255 - pix[i+2]; // blue // i+3 is alpha (the fourth element)}// draw the imagedata at the given (x,y) coordinates.context.putimagedata(imgd, x , y );يوضح الشكل 4 الأوبرا بعد استخدام هذا المرشح
الصورة (الشكل 3 هي الصورة الأصلية).
الشكل 4: مرشح انعكاس اللون
على الرغم من أن إصدار WebKit الأخير و Firefox 3.1 Nightly Build قد بدأوا فقط في دعم واجهات برمجة التطبيقات النصية ، من أجل ضمان سلامة المقالة ، قررت أن أعرض API النص هنا.
يمكن تعيين خصائص النص التالية في كائن context :
font : خط النص ، نفسه font-family
textalign : نص محاذاة أفقية. قيم السمة المرغوبة: start ، end ، left ، right ، center . القيمة الافتراضية:
start .
textbaseline : المحاذاة العمودية للنص. قيم السمات المرغوبة: top ، hanging ، middle ، alphabetic ، ideographic ، bottom . القيمة الافتراضية: alphabetic .
هناك طريقتان لرسم النص: filltext و stroketext . يرسم النص الأول مع ملء ملاءمة ، يرسم الأخير النص مع حدود نمط السكتة الدماغية فقط. معلمات كلاهما هي نفسها: النص المراد رسمه وإحداثيات الموضع (x ، y) للنص. هناك أيضًا خيار اختياري - أقصى عرض. إذا لزم الأمر ، فإن المتصفح يقلل من النص لتناسب العرض المحدد.
تؤثر سمة محاذاة النص على النص والإعدادات
(x ، y) الموضع النسبي للإحداثيات.
فيما يلي مثال على رسم نص Hello World في قماش
context.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);الشكل 5 هو تقديمه.
الشكل 5: تأثير النص
حاليا فقط konqueror و firefox 3.1 البناء الليلي دعم الظلال API. خصائص واجهة برمجة التطبيقات هي:
shadowcolor : لون الظل. قيمتها تتفق مع قيمة لون CSS.shadowblur : يضع درجة طمس الظل. أكبر هذه القيمة ، وأكثر ضبابية الظل. تأثيره هو نفسه مرشح غاوس غامض في فوتوشوب.shadowoffsetx و shadowoffsety : إزاحة X و Y من الظل ، بالبكسل.فيما يلي مثال على ظل القماش:
context.shadowoffsetx = 5;context.shadowoffsety = 5;context.shadowblur = 4;context.shadowcolor = 'rgba(255, 0, 0, 0.5)';context.fillstyle = '#00f';context.fillrect(20, 20, 150, 100);يظهر التأثير في الشكل 6.
الشكل 6: تأثير ظل قماش القماش - المستطيل الأزرق ، الظل الأحمر
بالإضافة إلى لون CSS ، يمكن ضبط خصائص fillstyle و strokestyle على كائنات canvasgradient . - يمكن canvasgradient استخدام تدرجات الألوان للخطوط والملء.
لإنشاء كائن canvasgradient ، يمكنك استخدام طريقتين: createlineargradient و createradialgradient . السابق يخلق تدرج اللون الخطي ، ويخلق الأخير تدرج اللون الدائري.
بعد إنشاء كائن تدرج ملون ، يمكنك استخدام طريقة addcolorstop للكائن لإضافة قيم متوسطة اللون.
يوضح الرمز التالي كيفية استخدام تدرجات الألوان:
// you need to provide the source 和destination (x,y) coordinates // for the gradient (from where it starts 和where it ends).var gradient1 = context.createlineargradient( sx , sy , dx , dy );// now you can add colors in your gradient.// the first argument tells the position for the color in your gradient. the // accepted value range is from 0 (gradient start) to 1 (gradient end).// the second argument tells the color you want, using the css color format.gradient1.addcolorstop(0, '#f00'); // redgradient1.addcolorstop(0.5, '#ff0'); // yellowgradient1.addcolorstop(1, '#00f'); // blue// for the radial gradient you also need to provide source// 和destination circle radius.// the (x,y) coordinates define the circle center points (start 和// destination).var gradient2 = context.createradialgradient( sx , sy , sr , dx , dy , dr );// adding colors to a radial gradient is the same as adding colors to linear // gradients.لقد قمت أيضًا بإعداد مثال أكثر تعقيدًا باستخدام التدرجات والظلال والنص الخطي. يظهر التأثير في الشكل 7.
الشكل 7: مثال على استخدام تدرج اللون الخطي
إذا كنت تريد معرفة ما يمكنك فعله باستخدام القماش ، فيرجى الرجوع إلى المشروع التالي:
كراسة الرسم
العرض التوضيحي ، مفتوح المصدر
رحلة جوية
Canvas هي واحدة من أكثر الميزات المتوقعة لـ HTML5 ، وقد تم دعمها من قبل معظم متصفحات الويب. يمكن أن تساعد القماش في إنشاء ألعاب وتعزيز واجهات المستخدم الرسومية. سياق 2D
يوفر API الكثير من قدرات رسم الرسومات - آمل أن تكون قد تعلمت استخدام القماش من خلال هذه المقالة وأنت مهتم بمعرفة المزيد!