js canvas 101 التعامل مع العنصر Canvas باستخدام جافاسكربت (رسم الصور )

سنتعرف في هذا الدّرس على الأنماط Patterns، الظلال Shadows وقواعد الملء في Canvas بالإضافة لرسم النصوص وتطبيق التنسيقات عليها مثل أنواع الخطوط Fonts وخصائصها. كما سنتعرف على واحدة من السمات الأكثر إثارة في canvas وهي القدرة على استخدام الصور لعمل تركيبات صور ديناميكية، خلفيات أو حتى شخصيات الألعاب.

الأنماط Patterns

تتيح لك canvas إنشاء أنماط باستخدام الصور وتحديد أنواعها باستخدام الدالة ()createPattern. تأخذ الدالة ()createPtterns معاملين هما الصورة المراد استخدامها لتطبيق النمط والتي يمكن أن تكون عنصر HTML أو وسم <video> أو حتى عنصر canvas آخر. 

المعامل الآخر هو النوع Type وهو عبارة عن نص string يحدد كيفيّة استخدام الصورة لتطبيق النمط.

createPattern(image, type)

يأخذ المعامل type أحد القيم التالية والتي تحدد كيفية استخدام الصورة لإنشاء النمط Pattern: 

• Repeat: تكرر الصورة في الاتجاهين الأفقي Horizontal والعمودي Vertical 
• repeat-x: تكرر الصورة في الاتجاه الأفقي Horizontal 
• repeat-y: تكرر الصورة في الاتجاه العمودي Vertical 
• no-repeat: تظهر الصورة مرة واحد كما هي.

تشبه الدالة ()createPattern دوال التدرج اللّوني gradient التي شرحتها في الدرس السّابق. 

عند إنشاء نمط يمكننا إسناده إلى الخاصية fillStyle أو strokeStyle كما في المثال التالي:

var img = new Image(); 
img.src = 'someimage.png'; 
var ptrn = ctx.createPattern(img,'repeat');

ملاحظة: تأكّد من أنك قمت بإنشاء صورة وإعطائها المسار الصحيح قبل استدعاء الدالة ()createPattern. في هذا المثال سنقوم بإنشاء نمط وإسناده للخاصية fillStyle حيث سننشئ النمط ضمن الدالة onload للصورة وذلك للتأكد من تحميل الصورة قبل إسنادها للنمط.

function draw() { 
  var ctx = document.getElementById('canvas').getContext('2d'); 
  var img = new Image(); 
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png'; 
  img.onload = function(){ 
    var ptrn = ctx.createPattern(img,'repeat'); 
    ctx.fillStyle = ptrn; 
    ctx.fillRect(0,0,150,150); 
  } 
}

النتيجة:

الظلال Shadows

باستخدام الظلال في canvas يمكنك عمل تظليل للنصوص والصور. استخدام الظلال في canvas يتضمن 4 خصائص:

• shadowOffsetX = float

تشير إلى أن الظل يمتد من الكائن بمسافة أفقية. لا تتأثر هذه القيمة بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. 

• shadowOffsetY = float

تشير إلى أن الظل يمتد من الكائن بمسافة عمودية. لا تتأثر هذه القيمة بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. 

• shadowBlur = float

تحدد حجم تأثير الضبابية blurring. لا تتعلق هذه القيمة بعدد الـ pixels ولا تتأثر بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. 

• shadowColor = color

هي قيمة ألوان CSS قياسية وتحدد لون الظل وقيمتها الافتراضية هي لون أسود بشفافية كاملة.

الخاصيتان shadowOffsetX و shadowOffsetY تشيران إلى أي مدى ينبغي أن يمتد الظل من الكائن في الاتجاه X والاتجاه Y. تأخذ الخاصيتين قيمًا سالبة وذلك لتحديد اتجاه الظل إما لليسار X- أو للأعلى Y-.

الخاصية shadowBlur تحدد حجم الضبابية للظل ولا تتعلق بعدد الـ pixels ولا تتأثر بمصفوفة التحويل Transformation matrix وقيمتها الافتراضية هي 0. 

المثال التالي يرسم نصًا بتأثيرات ظلال مختلفة باستخدام القيم أعلاه:

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

  ctx.shadowOffsetX = 2; 
  ctx.shadowOffsetY = 2; 
  ctx.shadowBlur = 2; 
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; 
  ctx.font = "20px Times New Roman"; 
  ctx.fillStyle = "Black"; 
  ctx.fillText("أهلًا بك في أكاديمية حسوب", 5, 30); 
}

قواعد الملء Fill Rules

عند استخدام الخاصية ()fill يمكنك تحديد خوارزمية الملء التي تريد تطبيقها ويمكن من خلالها تحديد فيما إذا كانت النقطة داخل أو خارج المسار وبالتالي تحديد هل سيتم ملئها أم لا. 

ويوجد لها قيمتان:

• nonzero وهي القيمة الافتراضية.
• evenodd

مثال:

function draw() { 
  var ctx = document.getElementById('canvas').getContext('2d'); 
  
  ctx.beginPath(); 
  ctx.arc(50, 50, 30, 0, Math.PI*2, true); 
  ctx.arc(50, 50, 15, 0, Math.PI*2, true); 
  ctx.fill("evenodd"); 
}

رسم النصوص

كأي شكل من الأشكال التي يمكن رسمها على canvas يمكن أيضًا رسم النصوص وتطبيق خصائص مختلفة عليها.

يوفّر سياق التصيير rendering context في canvas طريقتين لتصيير النصوص:

1- باستخدام الدالة fillText

fillText(text, x, y [, maxWidth])

تملأ نصًا مُعيّنًا عند موضع x,y معين، المعامل maxWidth معامل اختياري يحدد أقصى عرض للرسم.

2- باستخدام الدالة strokeText

 strokeText(text, x, y [, maxWidth])

تملأ حواف نص معين عند موضع x,y معين، المعامل maxWidth معامل اختياري يحدد أقصى عرض للرسم. 

مثال: ملء نص باستخدام fillStyle

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

  ctx.font = "48px serif"; 
  ctx.fillText("Hello world", 10, 50); 
}

مثال: ملء حواف نص باستخدام strokeStyle

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

  ctx.font = "48px serif"; 
  ctx.strokeText("Hello world", 10, 50); 
}

تصميم وتنسيق النصوص

يوفر سياق التصيير Rendering Context مجموعة من الخصائص تمكّنك من تحديد المظهر الذي تريد إظهار النص به على Canvas. ستبدو هذه الخصائص مألوفة لك إن كنت قد عملت على CSS من قبل.

• font = value

تحدد نمط النص الحالي (نوع الخط) الذي سيظهر به النص، تستخدم هذه الخاصية نفس قواعد استخدام الخاصية CSS font. القيمة الافتراضية للخط هي 10px sans-serif.

• textAlign = value

تُحدّد إعدادات محاذاة النص. القيم التي تأخذها هذه الخاصية هي start ،end ،left ،right أو center. القيمة الافتراضية لها هي center.

• textBaseline = value

تُحدّد إعدادات خط الأساس .Baseline القيم التي تأخذها الخاصية text Baseline هي top ،hanging ،middle ،alphabetic ،ideographic أو bottom. القيمة الافتراضية لها هي alphabetic.

• direction = value

تُحدّد الاتجاهية. القيم التي تأخذها الخاصية textAlign هي ltr ،rtl ،inherit. القيمة الافتراضية لها هي inherit.

يوضّح الرّسم البياني التالي المأخوذ من WHATWG مختلف خطوط الأساس Baseline التي تدعمها الخاصية textBaseline.

مثال:

ctx.font = "48px serif"; 
ctx.textBaseline = "hanging"; 
ctx.strokeText("Hello world", 0, 100);

قياسات النصوص المتقدمة

في حال كنت بحاجة لتطبيق المزيد من التفاصيل على النصوص فإن الدالة ()measureText توفر لك إمكانية لقياس النصوص حيث تُرجع الدالة ()measureText كائن من نوع TextMetrics يحتوي على عرض النص الحالي بالبكسل.

يظهر المثال التالي كيف يمكنك قياس الخط والحصول على عرضه:

function draw() { 
  var ctx = document.getElementById('canvas').getContext('2d'); 
  var text = ctx.measureText("foo"); 
  object text.width;
}

الصور

يعتمد استيراد الصور في Canvas على خطوتين أساسيتين: 

1. الحصول على مرجع reference لكائن HTMLImage أو لعنصر Canvas آخر لاستخدامه كمصدر. يمكن استخدام الصور أيضًا عن طريق توفير رابط URL. 
2. رسم الصورة على canvas باستخدام DrawImage. 

يستخدم Canvas API أي من أنواع البيانات التالية باعتبارها مصدر صورة للحصول على الصور ورسمها: 

• HTMLImageElement: يتم إنشاء الصور باستخدام المنشئ constructor كأي عنصر <img> في HTML.
• HTMLVideoElement: استخدام عنصر <video> كمصدر للصورة أي استخدام الاطار الحالي للفيديو كصورة.
• HTMLCanvasElement: يمكن استخدام عنصر <canvas> آخر كمصدر صورة.

استخدام الصور في Canvas

يوجد عدة طرق لاستخدام الصور في Canvas:

استخدام صور من نفس الصفحة

يمكننا الحصول على مرجع للصور reference من نفس الصفحة باستخدام أحد الطرق التالية: 

• document.images collection 
• استخدام الدالة ()document.getElementsByTagName
• استخدام الدالة ()document.getElementById عن طريق معرّف ID الخاص بالصورة

استخدام صور من مجالات أخرى

ويتم ذلك باستخدام الخاصية crossorigin للعنصر <img> يمكنك طلب إذن لتحميل الصورة من مجال Domain آخر لاستخدامها في استدعائك للدالة ()drawImage. إذا سمح مجال الاستضافة وصول cross-domain للصورة فسيتم استخدام الصورة في Canvas دون التأثير عليها أما في حال لم يتم السماح بالوصول للصورة فسيحدث تشويه للعنصر canvas.

استخدام عناصر Canvas أخرى

كما هو الحال مع الصور العادية يمكن الوصول لعناصر canvas أخرى باستخدام الدالة ()document.getElementsByTagName أو  ()document.getElementById.

يجب التأكد قبل استخدام عنصر Canvas آخر من أن العنصر الأساسي يحوي على رسم أو مسار. واحدة من أهم استخدامات هذا الأسلوب هو استخدام عنصر canvas كمعرض صور مصغرات لعنصر Canvas أكبر منه.

إنشاء صورة من الصفر

خيار آخر لإنشاء HTMLImageElement هي باستخدام المنشئ() Image:

var img = new Image(); 
img.src = 'myImage.png';

في حال استدعائك للدالة ()drawImage قبل الانتهاء من تحميل الصورة قد يظهر خطأ في المتصفحات القديمة لذا عليك التأكد من استخدام الحدث load بعد الانتهاء من تحميل الصورة:

var img = new Image(); 
img.addEventListener("load", function() { 
  // execute drawImage statements here 
}, false); 
img.src = 'myImage.png';

استخدام إطارات الفيديو

يمكنك أيضًا استخدام إطارات الفيديو <video> لإظهاره في الـ canvas. مثال:

function getMyVideo() { 
  var canvas = document.getElementById('canvas'); 
  if (canvas.getContext) { 
    var ctx = canvas.getContext('2d'); 
    return document.getElementById('myvideo'); 
  } 
}

سنكمل في الدّرس القادم التعامل مع الصور في canvas والتعرّف على خصائصها بالإضافة لإنشاء معرض فني.

المصادر