تعليق: يعلم الجميع أنه ليس كل المستعرضات تدعم حاليًا HTML5. حتى المتصفحات التي تدعم HTML5 قد لا تدعم جميع الميزات الجديدة لـ HTML5. يوصى باستخدام Firefox (المفضل للمطورين) أو متصفح Chrome. تم تطوير جميع الأمثلة الخاصة بي على أساس Firefox.
ابتداءً من اليوم ، سنبدأ سلسلة من الدورات التدريبية على قماش HTML5. هذه السلسلة هي ملخصي بعد قراءة "HTML5 Canvas: التفاعل الأصلي والرسوم المتحركة للويب". يمكن للأصدقاء المهتمين تنزيل الكتب الإنجليزية الأصلية للقراءة. يوضح لنا هذا الكتاب وظائف القماش القوية من خلال تقديم تطوير قماش. أعتقد أنه جيد جدًا. لقد تعلمت الكثير من المعرفة حول القماش من خلال قراءة هذا الكتاب. في الواقع ، لا يوجد العديد من واجهات برمجة التطبيقات في قماش نفسها. المفتاح هو تعلمها واستخدامها بنشاط وتعلم إنشاء نتائج لا تصدق لمجموعة واجهات برمجة التطبيقات. وهذا الكتاب هو أفضل خيار لك لتعلم القماش. إنه لأمر مؤسف أنه ليس لديه نسخة صينية حتى الآن. يمكن للأصدقاء مع اللغة الإنجليزية الفقراء الانتظار فقط.كما نعلم جميعًا ، لا تدعم جميع المتصفحات حاليًا HTML5 ، وحتى المتصفحات التي تدعم HTML5 قد لا تدعم بالضرورة جميع الميزات الجديدة لـ HTML5. لذلك يجب على الجميع اختيار متصفح جديد نسبيًا كبيئة تصحيح الأخطاء. يوصى باستخدام Firefox (المفضل للمطور) أو متصفح Chrome. تم تطوير جميع الأمثلة الخاصة بي على أساس Firefox.
لن أقدم المعرفة الأساسية المتعلقة بـ HTML5 هنا. هناك العديد من البرامج التعليمية حول HTML5 على الإنترنت ، حتى أتمكن من تعلم ذلك بنفسي. لتعلم HTML5 ، تحتاج إلى الحصول على أساس أفضل في JavaScript. يمكنك الذهاب إلى مدونة العم توم للتعلم:. في الواقع ، هذه السلسلة من الدورات صعبة للغاية. إذا درست أكثر من 50 مقالة جيدًا ، فيجب اعتبارك خبيرًا في JS.
الآن نبدأ رسميًا دورة Canvas الخاصة بنا ، المثال الأول: Hello Canvas.
أولاً ، تحتاج إلى إضافة علامة قماش في الجسم ، على النحو التالي:
<canvas>
لا يدعم متصفحك قماش HTML5.
</canvas>
سيتم عرض جزء النص في القماش عندما لا يدعم المتصفح كائن القماش.
يتم تعريف علامة قماش. عندما نحتاج إلى تشغيله من خلال JS ، يمكن تنفيذها من خلال getElementByid.
var thecanvas = document.getElementById (canvasone) ؛ لقد اعتدنا الآن على استخدام jQuery لتطوير المهام ، لذا كيفية الحصول على كائن قماش باستخدام jQuery؟
var canvas = $ ('#canvasone'). get (0) ؛ أو var canvas = $ ('#canvasone') [0] ؛ لا أعرف أن الحصول على (0) و [0] لا يملكون ذلك. إذا لم تستخدم طريقة GET () أو []] ، فلن يكون رمز JS الخاص بك قادرًا على تشغيل قماش القماش بشكل طبيعي. نظرًا لأن $ ('#canvasone') يحصل على كائن jQuery ، وما نريد تشغيله بالفعل هو كائن DOM HTML. هناك مشكلة حيث يتم تحويل كائن jQuery إلى كائن DOM ، ويتم إكمال هذا التحويل من خلال GET () أو التراكمي. إذا كنت بحاجة إلى تحويل كائن DOM إلى كائن jQuery ، فيمكنك استخدام طريقة $ () لتنفيذها. صديقي الذي ليس واضحًا حيال ذلك لديه الشخص الوحيد الذي يذهب إلى بايدو بمفرده ، لذلك لن أخوضه بتعمق هنا.
من أجل ضمان متانة الكود ، نحتاج إلى تحديد ما إذا كان المتصفح يدعم كائنات قماش ، والتي يمكن تنفيذها من خلال الكود التالي.
if (! thecanvas ||! thecanvas.getContext) {
يعود؛
}
ومع ذلك ، يوصى باستخدام مكتبة Modernizr.js لإكمال هذا العمل. هذه مكتبة HTML5 JS سلبية للغاية وتوفر العديد من الطرق المفيدة.
وظيفة canvassupport () {
إرجاع Modernizr.Canvas ؛
}
يدعم Canvas تقديم ثنائي الأبعاد ، ويتم تنفيذه من خلال الكود التالي:
var context = thecanvas.getContext (2d) ؛
بعد ذلك ، يمكننا رسم الصورة على قماش من خلال كائن السياق.
// اضبط لون المنطقة
context.fillStyle = "#ffffa" ؛
// ارسم المنطقة
context.fillRect (0 ، 0 ، 500 ، 300) ؛
// تعيين الخط
context.font = "20px _sans" ؛
// تعيين المحاذاة الرأسية
context.textBaseline = "Top" ؛
// ارسم النص
context.filltext ("Hello World!" ، 195 ، 80) ؛
// تعيين لون الحدود
context.strokestyle = "#000000" ؛
// رسم الحدود
Context.StrokEct (5 ، 5 ، 490 ، 290) ؛
تم وصف رسم الصورة أدناه. نظرًا للتنزيل غير المتزامن للصورة ، من أجل التأكد من أنه عند رسم صورة باستخدام قماش ، تم تنزيل الصورة ، نستخدم الطريقة التالية:
var helloWorldImage = new Image () ؛
HelloWorldImage.src = "HelloWorld.gif" ؛
HelloWorLdImage.onload = function () {
context.drawImage (HelloWorldImage ، 160 ، 130) ؛
}
عند الانتهاء من الصورة ، سيتم تشغيل حدث ONLOAD ، وسيتم رسم الصورة باستخدام كائن السياق.
الجميع قم بتنزيل العرض التوضيحي لمشاهدة الرمز الكامل. عنوان التنزيل التجريبي: html5canvas.helloworld.zip