الصفحة الرئيسية>دروس تصميم الويب>تعليمي HTML

HTML5 Canvas عنصر مفصل البرنامج التعليمي 1

الكاتب：Eve Cole وقت التحديث：2025-04-05 11:00:03
HTML5 Canvas عنصر مفصل البرنامج التعليمي 1: الاستخدام الأساسي.

<Canvas> هو عنصر جديد في HTML5 ، والذي يمكن استخدامه بواسطة JavaScript لرسم الرسومات. أولاً ، تم تقديم <Canvas> على لوحة معلومات Mac OS X من Apple ، والتي تم تطبيقها على Safari ، ثم بناءً على متصفح Gecko1.8 ، والذي يدعم أيضًا هذا العنصر الجديد ، مثل متصفح Firefox. اليوم ، عنصر <Canvas> هو جزء من مواصفات HTML5 القياسية.

سنشرح ما يمكن أن يفعله <Canvas> ، من خلال هذا البرنامج التعليمي ، ويمكن استخدامه كنقطة انطلاق لتطبيقك <canvas>. التعلم <canvas> عناصر ليس بالأمر الصعب. ما عليك سوى أن يكون لديك المعرفة الأساسية لـ HTML و JavaScript ، بالإضافة إلى متصفح Firefox ، أحدث إصدار من Safari أو Opera9+، بحيث يمكنك رؤية جميع تأثيرات المثال.

الآن لنبدأ بكيفية تحديد عنصر <Canvas>.

<canvas id = عرض البرنامج التعليمي = 150 ارتفاع = 150> </canvas>

يحتوي عنصر <Canvas> على سمتين فقط ، العرض والارتفاع ، وهما اختياري ويمكن التحكم فيه باستخدام DOM أو CSS. إذا لم يتم تعيين العرض والارتفاع ، فإن العرض الافتراضي هو 300 بكسل ويتم استخدام ارتفاع 150 بكسل. على الرغم من أنه يمكن التحكم في حجم <canvas> وتعديله من خلال CSS ، إلا أنه سيتم قياس الصورة المقدمة للتكيف مع التصميم. بمجرد العثور على نتائج التقديم لتبدو مشوهة ، ليس عليك الاعتماد على CSS. يمكنك تحديد قيم العرض والارتفاع المعروض في <canvas>. تمامًا مثل علامات HTML القياسية ، يمكن أيضًا تحديد سمات المعرف ، والتي يمكن أن تجعل تطبيق البرنامج النصي أكثر ملاءمة. يمكن لعنصر <Canvas> تحديد أسلوبه (الهوامش ، الحدود ، الخلفيات ، إلخ) مثل الصورة العادية. ومع ذلك ، فإن هذه الأنماط ليس لها أي تأثير على الصورة الفعلية التي تم إنشاؤها بواسطة قماش.

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

  1.  <canvasid = stockgraphwidth = 150Height = 150>
  2.  لا يدعم متصفحك عنصر <Canvas>.
  3.  </canvas>
  4.  <canvasid = clockwidth = 150Height = 150>
  5.  <imgsrc = images.pngwidth = 150height = 150alt = استبدال الصورة/
  6.  </canvas>

في Apple Safari ، يشبه تطبيق <canvas> إلى حد كبير <img> ، وليس له علامة نهائية. ومع ذلك ، لكي يكون <canvas> قابلاً للتطبيق على نطاق واسع في عالم الويب ، يجب تزويد المحتوى البديل بمكان للبقاء ، لذلك من الضروري إنهاء العلامة (<//canvas>) في تطبيق Mozilla. <canvas id = foo ...> </tanvas> متوافق تمامًا مع Safari و Mozilla - Safari يتجاهل ببساطة علامة النهاية. إذا كان هناك محتوى بديل ، فيمكنك استخدام بعض حيل CSS لإخفاء محتوى بديل لـ Safari وفقط له ، لأنه يجب عرض المحتوى البديل في IE ولكن ليس في Safari.

يقوم <Canvas> بإنشاء شاشة رسم ذات حجم ثابت مع واحد أو أكثر من سياقات العرض التي يمكن أن تتحكم في ما يجب عرضه. نحن نركز على التقديم ثنائي الأبعاد ، وهو أيضًا الخيار الوحيد في الوقت الحالي. قد نضيف عرضًا ثلاثي الأبعاد على أساس OpenGL ES في المستقبل.

  1.  varcanvas = document.getElementById ('البرنامج التعليمي') ؛
  2.  varctx = canvas.getContext ('2d') ؛

دعنا نوضح الرمز أعلاه. تهيئة <canvas> فارغة. لرسم نص ، تحتاج إلى تقديم السياق أولاً. يمكن الحصول عليها من خلال طريقة getContext لكائن عنصر القماش. في الوقت نفسه ، يتم أيضًا الحصول على بعض الوظائف التي تحتاج إلى استدعاء الرسم. يقبل GetContext () قيمة تصف نوعها كوسيطة. يحصل السطر الأول أعلاه على عقدة DOM لكائن قماش من خلال طريقة getElementByID. ثم استخدم طريقة GetContext للحصول على سياق تشغيل الرسم. بالإضافة إلى ذلك ، يمكننا أيضًا استخدام البرامج النصية لتحديد دعم المتصفح لـ <canvas> ، أي ، لتحديد ما إذا كان GetContext موجودًا أم لا.

  1.  varcanvas = document.getElementById ('البرنامج التعليمي') ؛
  2.  if (canvas.getContext) {
  3.  varctx = canvas.getContext ('2d') ؛
  4.  // DrawingCodehere
  5.  }آخر{
  6.  // canvas-unsupportedCodehere
  7.  }

نبدأ بأبسط قالب أدناه ، يمكنك نسخها إلى النسخ الاحتياطي المحلي.

  1.  <html>
  2.  <head>
  3.  <title> canvastutorial </title>
  4.  <scriptType = text/javaScript>
  5.  functionDraw () {
  6.  varcanvas = document.getElementById ('البرنامج التعليمي') ؛
  7.  if (canvas.getContext) {
  8.  varctx = canvas.getContext ('2d') ؛
  9.  }
  10.  }
  11.  </script>
  12.  <Tyletype = text/css>
  13.  قماش {الحدود: 1pxsolidblack ؛}
  14.  </style>
  15.  </head>
  16.  <bodyonload = draw () ؛>
  17.  <canvasid = tutorialWidth = 150Height = 150> </tanvas>
  18.  </body>
  19.  </html>

ستجد بعناية وظيفة تسمى Draw ، والتي سيتم تنفيذها مرة واحدة بعد تحميل الصفحة (عن طريق تعيين خاصية Onload لعلامة الجسم) ، وبالطبع يمكن استدعاؤها أيضًا في SetTimeOut أو SetInterval أو وظائف معالجة الأحداث الأخرى.

للبدء ، دعونا نلقي نظرة بسيطة - ارسم مستطيلتين متداخلين ، أحدهما له تأثير شفاف ألفا. سنعطيك نظرة مفصلة على كيفية عمله في المثال التالي.

  1.  <html>
  2.  <head>
  3.  <scriptType = Application/X-JavaScript>
  4.  functionDraw () {
  5.  varcanvas = document.getElementById (قماش) ؛
  6.  if (canvas.getContext) {
  7.  varctx = canvas.getContext (2d) ؛
  8.  ctx.fillstyle = rgb (200،0،0) ؛
  9.  CTX.FillRect (10،10،55،50) ؛
  10.  CTX.FillStyle = RGBA (0،0،200،0.5) ؛
  11.  CTX.FillRect (30،30،55،50) ؛
  12.  }
  13.  }
  14.  </script>
  15.  </head>
  16.  <bodyonload = draw () ؛>
  17.  <canvasid = canvaswidth = 150height = 150> </tanvas>
  18.  </body>
  19.  </html>

يمكنك نسخ الرمز أعلاه إلى ملف HTML لتشغيله ، العروض:

مقالات ذات صلة