هذه الترجمة لم تكتمل. رجاءً ساعد بترجمة هذه المقالة من الإنجليزية.

في HTML5، أُضيف عنصر HTML ‏<canvas> والذي يمكن استخدامه لرسم الرسوميات ببرمجتها عبر جافاسكربت. فمثلا، يمكن استخدامها لرسم الرسوم البيانية، أو تراكبات الصور، أو إنشاء الحركات أو حتى معالجة الفديوهات آنيا وتصييرها.

حصلت تطبيقات موزيلا على دعم <canvas> بدءًا من إصدارة جيكو رقم ١٫٨ (أي فَيَرفُكس ١٫٥). طُوّر هذا العنصر على يد شركة آبل للوحة أوإس إكس وسفاري. يدعم إنترنت إكسبلورر <canvas> بدءًا من الإصدارة التاسعة فما فوق، بينما الإصدارات الأقدم منه تحتاج سكربتا ليعمل عنصر رقعة الرسم بكفاءة، هذا السكربت هو من مشروع جوجل باسم Explorer Canvas. يدعم جوجل كروم وأوبرا ٩ عتصر <canvas> أيضا.

يُستخدم عنصر <canvas> في تقنية WebGL أيضا لرسم الرسومات ثلاثية الأبعاد على صفحات الوب بتسريع عتادي.

مثال

هذه عيّنة مقتطفة من كود يستخدم طريقة CanvasRenderingContext2D.fillRect().

HTML

<canvas id="canvas"></canvas>

جافاسكربت

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);

حرّر الكود أدناه لترى التغييرات تحدث آنيا في رقعة الرسم:

المرجع

الواجهات المتعلقة بِ‍ WebGLRenderingContext مذكورة في مرجع WebGL.

واجهة CanvasCaptureMediaStream لها علاقة أيضا.

الأدلة والدروس

درس رقعة الرسم
درس شامل يغطي كلا من الاستخدام البسيط لرقعة الرسم <canvas> وأيضا مزاياها المتقدمة.
مقتطفات من كود: رقعة الرسم
بعض المقتطفات المخصصة لمطوري الامتدادات والتي تستخدم  <canvas>.
Demo: A basic ray-caster
عرض لحركة تعقّب الأشعة باستخدام رقعة الرسم.
رسم كائنات DOM في رقعة رسم
طريقة رسم محتوى DOM (مثل عناصر HTML) في رقعة رسم.
التعديل على الفديو باستخدام رقعة الرسم
يمكنك بدمج <video> و<canvas> التلاعب والتعديل على الفديو آنيا.

الموارد

عامة

المكتبات

  • Fabric.js مكتبة رقعة رسم مفتوحة المصدر تأتي بإمكانيات تحليل SVG.
  • Kinetic.js مكتبة رقعة رسم مفتوحة المصدر تركز على التفاعل في تطبيقات سطح المكتب والمحمول.
  • Paper.js إطار عمل رسوميات متجهية مفتوح المصدر يعمل على رقعة رسم HTML5.
  • Origami.js مكتبة رقعة رسم خفيفة مفتوحة المصدر.
  • libCanvas إطار عمل رقعة رسم خفيف وقوي.
  • Processing.js نقل للغة التمثيل Processing.
  • PlayCanvas محرّك ألعاب مفتوح المصدر.
  • Pixi.js محرّك ألعاب مفتوح المصدر.
  • PlotKit مكتبة للرسوم البيانية.
  • Rekapi واجهة برمجة تطبيقات تتعامل مع الإطارات المفتاحية للحركات لرقعة الرسم.
  • PhiloGL إطار عمل WebGL لتمثيل البيانات، والبرمجة الخلّاقة وتطوير الألعاب.
  • JavaScript InfoVis Toolkit تُنشئ تمثيلات بيانات لرقعة الرسم ثنائية الأبعاد تفاعلية للوب.
  • EaselJS مكتبة مفتوحة المصدر حرة تسهّل استخدام رقعة الرسم للألعاب والفنون.
  • Scrawl-canvas مكتبة جافاسكربت مفتوحة المصدر لإنشاء وتعديل عناصر رقعة الرسم ثنائية الأبعاد.
  • heatmap.js مكتبة مفتوحة المصدر لإنشاء خرائط حرارية بناء على رقعة الرسم.

المواصفات

المواصفة الحالة تعليق
HTML Living Standard
The definition of '<canvas>' in that specification.
Living Standard  

طالع أيضا

Document Tags and Contributors

المساهمون في هذه الصفحة: SafaAlfulaij
آخر مَن حدّثها: SafaAlfulaij,