تعليق: يقدم HTML5 علامة جديدة ، والمنطقة التي يمثلها هذه التسمية مثل قماش. يجب تقديم جميع رسومات الرسوم الخاصة بك على هذه القماش في النهاية. مع هذه العلامة ، تم تحسين تعبير الرسومات في المتصفح إلى حد كبير. هل يشعر الفلاش والفضي بالتهديد؟
1. <canvas> علامةيقدم HTML5 علامة <Canvas> جديدة ، والمساحة التي يمثلها هذه العلامة مثل قماش ، ويجب تقديم جميع رسومات الرسوم الخاصة بك على هذه القماش في النهاية. مع هذه العلامة ، تم تحسين تعبير الرسومات في المتصفح إلى حد كبير. هل يشعر الفلاش والفضي بالتهديد؟
رابط الأخبار: تدعي Google أن متصفح Chrome 7 سوف يسرع أسرع 60 مرة
استخدام علامة <canvas> بسيطة للغاية ، على النحو التالي:
<canvas>
لا يدعم متصفحك علامة القماش
</canvas>
لا يوجد فرق كبير بين علامة <canvas> وعلامة HTML العادية. يمكنك ضبط عرضه وارتفاعه ، ويمكنك ضبط لون الخلفية ، ونمط الحدود ، وما إلى ذلك من خلال CSS.
يمكنك العثور على المزيد حول علامة <canvas> هنا.
المحتوى في منتصف العلامة هو محتوى الاستبدال. إذا كان متصفح المستخدم لا يدعم علامة <Canvas> ، فسيتم عرض المحتوى ؛ إذا كان متصفح المستخدم يدعم علامة <Canvas> ، فسيتم تجاهل المحتوى.
يعرض رمز <Navas> أعلاه التأثير التالي:
لا يدعم متصفحك علامة القماش
إذا كنت تستخدم متصفح IE ، فقد ترى موجهًا فقط ؛ إذا كنت تستخدم متصفح Google Chrome أو Firefox ، فيمكنك رؤية منطقة مربعة حمراء.
2. سياق تقديم
في الواقع ، لا يمكننا فعل أي شيء باستخدام علامة <canvas>. يعلم الطلاب الذين لعبوا برمجة Windows أنه عند الرسم في Windows ، يجب أولاً الحصول على سياق الجهاز DC ، وعند الرسم على علامة <canvas> ، تحتاج أيضًا إلى الحصول على سياق عرض. لا يتم رسم رسوماتنا مباشرة على الشاشة ، ولكن على السياق (السياق) أولاً ، ثم تحديث على الشاشة.
خارج الموضوع: لماذا تحتاج إلى تجميع مفهوم مع مثل هذا السياق المعقد؟ بسبب كائن السياق ، يمكننا جعل أجهزة الرسومات المختلفة تبدو كما هي في عيوننا. نحتاج فقط إلى التركيز على الرسم ، والسماح لنظام التشغيل والمتصفح بالقلق بشأن المهام الأخرى. لوضعها بصراحة ، اقلب جميع أنواع الخرسانة إلى تجريدات موحدة ، مما يقلل من عبءنا.
الحصول على السياق بسيط للغاية ، فأنت بحاجة فقط إلى سطرين من التعليمات البرمجية على النحو التالي:
var canvas = document.getElementById ('Tutorial') ؛
var ctx = canvas.getContext ('2d') ؛
أولاً ، احصل على كائن Canvas ، ثم اتصل بالطريقة getContext لكائن Canvas. يمكن أن تمر هذه الطريقة فقط في المعلمة 2D في الوقت الحاضر. في المستقبل القريب ، قد يدعم المعلمة 3D. يجب أن تفهم ما يعنيه ذلك ، دعنا نتطلع إليه.
تقوم طريقة getContext بإرجاع كائن canvasrenderingcontext2d ، أي كائن سياق التقديم. يمكنك العثور على المزيد حول هذا الموضوع هنا ، وكلها بعض طرق الرسم.
3. دعم المتصفح
بالإضافة إلى عرض محتوى بديل على تلك المتصفحات غير المدعومة ، يمكننا أيضًا التحقق مما إذا كان المتصفح يدعم القماش من خلال البرامج النصية. الطريقة بسيطة للغاية. فقط تحكم على ما إذا كانت وظيفة getContext موجودة. الرمز كما يلي:
var canvas = document.getElementById ('Tutorial') ؛
if (canvas.getContext) {
تنبيه ("دعم <canvas> علامة") ؛
} آخر {
تنبيه ("غير مدعوم <canvas> علامة") ؛
}
4. مثال صغير
أدناه ، سيتم إظهار مثال على خطوط نقل لأعلى ولأسفل باستخدام وظيفة رسم HTML5. سيتم إعطاء الرمز المحدد في المحتوى اللاحق.
لا يدعم متصفحك علامة <Canvas> ، يرجى استخدام متصفح Chrome أو Firefox