تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

التأثيرات الطباعية في اللوحة

Michael Deal

معلومات عنّي

جاءت "<canvas>" في ذهني في عام 2006 عندما تم إطلاق الإصدار 2.0 من Firefox. ألهمتني مقالة عن Ajaxian، التي تصف مصفوفة التحويل، لإنشاء أول تطبيق ويب <canvas> لي، وهو Color Sphere (2007). وقد شغّل هذا البرنامج شغفي بالألوان والأشكال الأساسية للرسومات، ما ألهمني بإنشاء Sketchpad (من 2007 إلى 2008) في محاولة لإنشاء تطبيق "أفضل من Paint" في المتصفّح. أدّت هذه التجارب في النهاية إلى إنشاء شركة Mugtug الناشئة مع صديقي القديم تشارلز بريتشارد. نعمل على تطوير Darkroom في HTML5 <canvas>. Darkroom هو تطبيق غير مدمر لمشاركة الصور، ويجمع بين إمكانيات الفلاتر القائمة على وحدات البكسل مع أسلوب الخط والرسم المستند إلى المتجه.

مقدمة

يتيح <canvas> لمبرمجي JavaScript التحكّم الكامل في الألوان والمتّجهات والبكسل على شاشاتهم، وهو التركيب المرئي للشاشة.

تتناول الأمثلة التالية مجالاً واحدًا في <canvas> لم يلقَّ الكثير من الاهتمام، وهو إنشاء التأثيرات النصية. إنّ مجموعة تأثيرات النص التي يمكن إنشاؤها في <canvas> واسعة جدًا، وتغطي هذه العروض التوضيحية قسمًا فرعيًا من التأثيرات الممكنة. على الرغم من أنّنا نتناول "النص" في هذه المقالة، يمكن تطبيق الأساليب على أيّ عناصر متّجه، لإنشاء مرئيات مثيرة في الألعاب والتطبيقات الأخرى:

ظلال النصوص في <canvas>: تأثيرات نصية مشابهة لـ CSS في <canvas> من خلال إنشاء أقنعة اقتصاص والعثور على المقاييس في <canvas> واستخدام خاصية الظل.
قوس قزح نيون، انعكاس الحمار الوحشي - تأثيرات التسلسل: تأثيرات نصية مثل تلك المتوفّرة في Photoshop في <canvas> مثال على استخدام globalCompositeOperation وcreateLinearGradient وcreatePattern
ظلال داخلية وخارجية في <canvas>: تقديم ميزة غير معروفة كثيرًا: استخدام لفّة باتجاه عقارب الساعة أو عكسها لإنشاء تأثير معاكس لظلّ خلفي (الظلّ الداخلي).
Spaceage - تأثير توليدي: استنادًا إلى التوليد في <canvas> باستخدام دورة ألوان hsl() وwindow.requestAnimationFrame لخلق إحساس بالحركة

ظلال نصية في لوحة الرسم

إنّ أحد الإضافات المفضّلة لديّ إلى مواصفات CSS3 (إلى جانب border-radius وweb-gradients وغيرها) هو إمكانية إنشاء الظلال. من المهم معرفة الاختلافات بين تظليل CSS و<canvas>، وعلى وجه التحديد:

تستخدم CSS طريقتين؛ box-shadow للعناصر الصندوقية، مثل div وspan وما إلى ذلك، وtext-shadow للمحتوى النصي.

يحتوي <canvas> على نوع واحد من الظلال، ويتم استخدامه لجميع رسومات الأشكال الهندسية، مثل ctx.moveTo وctx.lineTo وctx.bezierCurveTo وctx.quadradicCurveTo وctx.arc وctx.rect وctx.fillText وctx.strokeText وما إلى ذلك. لإنشاء ظلّ في <canvas>، استخدِم السمات الأربع التالية:

ctx.shadowColor = "red" // string: لون الظل: تكون قيم RGB وRGBA وHSL وHEX وغيرها من قيم الإدخال صالحة.
ctx.shadowOffsetX = 0; // عدد صحيح: المسافة الأفقية للظل بالنسبة إلى النص
ctx.shadowOffsetY = 0; // عدد صحيح: المسافة العمودية للظل بالنسبة إلى النص
ctx.shadowBlur = 10; // عدد صحيح: تأثير التمويه على الظل، وكلما زادت القيمة، زاد التمويه.

للبدء، لنطّلِع على كيفية تقليد <canvas> لتأثيرات CSS. من خلال البحث في "صور Google" عن "css text-shadow"، عثرنا على بعض نماذج رائعة للتقليد، مثل Line25، وStereoscopic، و Shadow 3D.

إنّ التأثير الثلاثي الأبعاد المجسم (اطّلِع على صورة الإسقاط المجسم لمزيد من المعلومات) هو مثال على سطر رمز بسيط يتم استخدامه بشكل رائع. باستخدام السطر التالي من CSS، يمكننا إنشاء وهم العمق عند المشاهدة باستخدام نظارات ثلاثية الأبعاد باللون الأحمر/الأزرق السماوي (النوع الذي يُعطى لك في الأفلام الثلاثية الأبعاد):

text-shadow: -0.06em 0 0 red, 0.06em 0 0 cyan;

هناك أمران يجب ملاحظتهما عند تحويل هذه السلسلة إلى <canvas>:

لا تتوفّر قيمة shadow-blur (القيمة الثالثة)، لذا ما مِن سبب لتنفيذ shadow، لأنّ fillText سيؤدي إلى تحقيق النتائج نفسها:

var text = "Hello world!"
ctx.fillStyle = "#000"
ctx.fillText(text, -7, 0);
ctx.fillStyle = "red"
ctx.fillText(text, 0, 0);
ctx.fillStyle = "cyan"
ctx.fillText(text, 7, 0);</pre>

لا تتوفّر ميزة "الإعلانات المتجاوبة على شبكة البحث" في <canvas>، لذا يجب تحويلها إلى إعلانات PX. يمكننا العثور على نسبة التحويل للتحويل بين PT وPC وEM وEX وPX وما إلى ذلك من خلال إنشاء عنصر يتضمن سمات الخط نفسها في DOM، وضبط العرض على التنسيق المطلوب قياسه. على سبيل المثال، لتسجيل عملية التحويل من EM إلى PX، سنقيس عنصر DOM باستخدام "height: 1em"، وسيكون offsetHeight الناتج هو عدد وحدات PX في كل EM.

var font = "20px sans-serif"
var d = document.createElement("span");
d.style.cssText = "font: " + font + " height: 1em; display: block"
// the value to multiply PX 's by to convert to EM 's
var EM2PX = 1 / d.offsetHeight;</pre>

منع ضرب ألفا

في مثال أكثر تعقيدًا، مثل تأثير النيون المتوفّر في السطر 25، يجب استخدام سمة shadowBlur لمحاكاة التأثير بشكل صحيح. بما أنّ تأثير النيون يعتمد على ظلال متعدّدة، نواجه مشكلة. في <canvas> لا يمكن أن يتضمّن كلّ عنصر مرسوم بالاستناد إلى متّجه ظلًّا واحدًا فقط. وبالتالي، لرسم عدة ظلال، عليك رسم نُسخ متعددة من النص فوق نفسه. ويؤدي ذلك إلى ضرب شفافية العنصر، وفي النهاية إلى ظهور حواف خشنة.

حاولت تشغيل ctx.fillStyle = "rgba(0,0,0,0)" أو "transparent" لإخفاء النص مع عرض الظل، ولكن تعذّر تنفيذ هذه المحاولة، لأنّ الظل هو حاصل ضرب fillStyle alpha، وبالتالي لا يمكن أن يكون الظل أكثر عتامة من fillStyle.

لحسن الحظ، هناك طريقة للتغلب على ذلك، يمكننا رسم إزاحة الظل من النص، وإبقائها منفصلة (بحيث لا تتداخل)، وبالتالي إخفاء النص عن جانب الشاشة:

var text = "Hello world!"
var blur = 10;
var width = ctx.measureText(text).width + blur * 2;
ctx.textBaseline = "top"
ctx.shadowColor = "#000"
ctx.shadowOffsetX = width;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = blur;
ctx.fillText(text, -width, 0);

اقتصاص المحتوى حول مقطع نصي

لتنظيف هذا المقطع قليلاً، يمكننا منع رسم fillText في البداية (مع السماح برسم الظل) عن طريق إضافة مسار اقتصاص. لإنشاء مسار اقتصاص يحيط بالنص، نحتاج إلى معرفة ارتفاع النص (يُعرف باسم "ارتفاع em"، وهو ارتفاع الحرف "م" على آلة الطباعة) وعرض النص. يمكننا الحصول على العرض باستخدام ctx.measureText().width، ولكن ctx.measureText().height غير متوفّر.

لحسن الحظ، من خلال خدعة CSS (راجِع مقاييس الطباعة للاطّلاع على المزيد من الطرق لإصلاح عمليات التنفيذ القديمة من <canvas> باستخدام قياسات CSS)، يمكننا العثور على ارتفاع النص من خلال قياس offsetHeight من <span> باستخدام سمات الخط نفسها:

var d = document.createElement("span");
d.font = "20px arial"
d.textContent = "Hello world!"
var emHeight = d.offsetHeight;

من هناك، يمكننا إنشاء مستطيل لاستخدامه كمسار اقتصاص، مع إحاطة "الظل" أثناء إزالة الشكل الوهمي.

ctx.rect(0, 0, width, emHeight);
ctx.clip();

ربط كل هذه العناصر معًا وتحسينها أثناء التنفيذ: إذا لم يكن للظلام تمويه، يمكن استخدام fillText للحصول على التأثير نفسه، ما يجنبنا إعداد قناع القطع:

var width = ctx.measureText(text).width;
var style = shadowStyles[text];
// add a background to the current effect
ctx.fillStyle = style.background;
ctx.fillRect(0, offsetY, ctx.canvas.width, textHeight - 1)
// parse text-shadows from css
var shadows = parseShadow(style.shadow);
// loop through the shadow collection
var n = shadows.length; while(n--) {
var shadow = shadows[n];
var totalWidth = width + shadow.blur * 2;
ctx.save();
ctx.beginPath();
ctx.rect(offsetX - shadow.blur, offsetY, offsetX + totalWidth, textHeight);
ctx.clip();
if (shadow.blur) { // just run shadow (clip text)
    ctx.shadowColor = shadow.color;
    ctx.shadowOffsetX = shadow.x + totalWidth;
    ctx.shadowOffsetY = shadow.y;
    ctx.shadowBlur = shadow.blur;
    ctx.fillText(text, -totalWidth + offsetX, offsetY + metrics.top);
} else { // just run pseudo-shadow
    ctx.fillStyle = shadow.color;
    ctx.fillText(text, offsetX + (shadow.x||0), offsetY - (shadow.y||0) + metrics.top);
}
ctx.restore();
}
// drawing the text in the foreground
if (style.color) {
ctx.fillStyle = style.color;
ctx.fillText(text, offsetX, offsetY + metrics.top);
}
// jump to next em-line
ctx.translate(0, textHeight);

بما أنّه لن يكون من المفيد إدخال كل أوامر <canvas> هذه يدويًا، لقد أدرجنا في مصدر العرض التوضيحي برنامجًا بسيطًا لتحليل النصّ المظلّل، وبالتالي يمكنك إرسال أوامر CSS إليه وإنشاء أوامر <canvas>. والآن، تحتوي عناصر <canvas> على مجموعة كاملة من الأنماط التي يمكن ربطها. يمكن استخدام تأثيرات الظلال نفسها على أي عنصر رسومات متجهّة، بدءًا من WebFonts وحتى الأشكال المعقدة التي تم استيرادها من ملفات SVG، والأشكال المولدة للرسومات المتجهة، وما إلى ذلك.

الفاصل (المماس عند دفع وحدات البكسل)

أثناء كتابة هذا القسم من المقالة، أثارت مثال الصور المجسمة فضولي. ما مدى صعوبة إنشاء تأثير لشاشة فيلم ثلاثية الأبعاد باستخدام <canvas> وصورتَين تم التقاطهما من منظورَين مختلفَين قليلاً؟ يبدو أنّه ليس صعبًا جدًا. تجمع النواة التالية بين القناة الحمراء للصورة الأولى (data) والقناة السماوية للصورة الثانية (data2):

data[i] = data[i] * 255 / 0xFF;
data[i+1] = 255 * data2[i+1] / 0xFF;
data[i+2] = 255 * data2[i+2] / 0xFF;

الآن، ما على المستخدم سوى لصق هاتفَي iPhone على جبهته والنقر على "تسجيل فيديو" في الوقت نفسه، وسنتمكن من إنشاء أفلامنا الثلاثية الأبعاد الخاصة بنا باستخدام HTML5. هل هناك أي متطوّعين؟

قوس قزح نيون، انعكاس الحمار الوحشي — تأثيرات سلسلة

يمكن أن يكون تسلسل تأثيرات متعددة في <canvas> بسيطًا، ولكن يجب أن يكون لديك معرفة أساسية بـ globalCompositeOperation‏ (GCO). لمقارنة العمليات بـ GIMP (أو Photoshop): يتوفر 12 GCO في <canvas> داكن، والأفتح يمكن اعتبارها أوضاع مزج الطبقات؛ أما العمليات العشر الأخرى فيتم تطبيقها على الطبقات مثل أقنعة ألفا (تزيل طبقة واحدة وحدات البكسل من الطبقة الأخرى). تربط globalCompositeOperation "الطبقات" (أو في حالتنا، سلاسل الرموز البرمجية) معًا، وتدمجها بطرق جديدة ومثيرة:

يعرض الرسم البياني globalCompositeOperation أوضاع GCO أثناء العمل، ويستخدم هذا الرسم البياني جزءًا كبيرًا من طيف الألوان ومستويات متعددة من شفافية ألفا من أجل الاطّلاع بالتفصيل على النتائج المتوقّعة. أنصحك بمراجعة مرجع GlobalCompositeOperation في Mozilla للحصول على أوصاف نصية. لإجراء المزيد من الأبحاث، يمكنك الاطّلاع على كيفية عمل العملية في مقالة Porter Duff حول تركيب الصور الرقمية.

الوضع المفضل لدي هو GlobalCompositeOperation="lighter". يمزج الضوء الملوّن الوحدات المرفقة بالطريقة نفسها التي يمزج بها الضوء. عندما يكون الضوء الأحمر والأخضر والأبيض عند الشدة الكاملة، نرى الضوء الأبيض. وهذه ميزة مشوّقة لا سيما عند ضبط قيمة <canvas> على قيمة معدّلة منخفضة في جميع أنحاء العالم، ما يتيح التحكم الدقيق وحواف أكثر سلاسة. تم استخدام Lighter في العديد من التطبيقات، ومن أمثلة ذلك أداة إنشاء خلفيات سطح المكتب بتنسيق HTML5 المتوفّرة على الرابط http://weavesilk.com/. ويستخدم أيضًا أحد عروضي التوضيحية، BreathingGaxies (JS1k)، الوضع الأخفّ، حيث يتم رسم أنماط من هذين المثالين، وتبدأ أنت في إدراك التأثير الناتج عن هذا الوضع.

معالجة المتصفّح لـ globalCompositeOperation

تأثير اهتزاز قوس قزح النيون

في العرض التوضيحي التالي، سيتم تحقيق توهج قوس قزح مماثل لـ Photoshop مع مخطط متقطع، من خلال تسلسل التأثيرات معًا باستخدام الخاصية "globalCompositeOperation" (ضمن المصدر وأفتح وأغمق). هذا العرض التوضيحي هو خطوة متقدمة من عرض "ظلال النصوص في <canvas>"، ويستخدم الأسلوب نفسه في فصل الظل عن النص (راجِع القسم السابق):

function neonLightEffect() {
var text = "alert('"+String.fromCharCode(0x2665)+"')";
var font = "120px Futura, Helvetica, sans-serif";
var jitter = 25; // the distance of the maximum jitter
var offsetX = 30;
var offsetY = 70;
var blur = getBlurValue(100);
// save state
ctx.save();
ctx.font = font;
// calculate width + height of text-block
var metrics = getMetrics(text, font);
// create clipping mask around text-effect
ctx.rect(offsetX - blur/2, offsetY - blur/2,
        offsetX + metrics.width + blur, metrics.height + blur);
ctx.clip();
// create shadow-blur to mask rainbow onto (since shadowColor doesn't accept gradients)
ctx.save();
ctx.fillStyle = "#fff";
ctx.shadowColor = "rgba(0,0,0,1)";
ctx.shadowOffsetX = metrics.width + blur;
ctx.shadowOffsetY = 0;
ctx.shadowBlur = blur;
ctx.fillText(text, -metrics.width + offsetX - blur, offsetY + metrics.top);
ctx.restore();
// create the rainbow linear-gradient
var gradient = ctx.createLinearGradient(0, 0, metrics.width, 0);
gradient.addColorStop(0, "rgba(255, 0, 0, 1)");
gradient.addColorStop(0.15, "rgba(255, 255, 0, 1)");
gradient.addColorStop(0.3, "rgba(0, 255, 0, 1)");
gradient.addColorStop(0.5, "rgba(0, 255, 255, 1)");
gradient.addColorStop(0.65, "rgba(0, 0, 255, 1)");
gradient.addColorStop(0.8, "rgba(255, 0, 255, 1)");
gradient.addColorStop(1, "rgba(255, 0, 0, 1)");
// change composite so source is applied within the shadow-blur
ctx.globalCompositeOperation = "source-atop";
// apply gradient to shadow-blur
ctx.fillStyle = gradient;
ctx.fillRect(offsetX - jitter/2, offsetY,
            metrics.width + offsetX, metrics.height + offsetY);
// change composite to mix as light
ctx.globalCompositeOperation = "lighter";
// multiply the layer
ctx.globalAlpha = 0.7
ctx.drawImage(ctx.canvas, 0, 0);
ctx.drawImage(ctx.canvas, 0, 0);
ctx.globalAlpha = 1
// draw white-text ontop of glow
ctx.fillStyle = "rgba(255,255,255,0.95)";
ctx.fillText(text, offsetX, offsetY + metrics.top);
// created jittered stroke
ctx.lineWidth = 0.80;
ctx.strokeStyle = "rgba(255,255,255,0.25)";
var i = 10; while(i--) { 
    var left = jitter / 2 - Math.random() * jitter;
    var top = jitter / 2 - Math.random() * jitter;
    ctx.strokeText(text, left + offsetX, top + offsetY + metrics.top);
}    
ctx.strokeStyle = "rgba(0,0,0,0.20)";
ctx.strokeText(text, offsetX, offsetY + metrics.top);
ctx.restore();
};

تأثير انعكاس الحمار الوحشي

استُوحي تأثير "انعكاس الحمار الوحشي" من مرجع WebDesignerWall الممتاز حول كيفية تحسين صفحتك باستخدام CSS. ينقل هذا الإجراء الفكرة إلى مستوى أعلى قليلاً، من خلال إنشاء "صورة طبق الأصل" للنص، مثل ما قد يظهر أمامك في iTunes. يجمع التأثير بين fillColor (أبيض) وcreatePattern (zebra.png) وlinearGradient (لمعان)، ما يوضّح إمكانية تطبيق عدة أنواع للملء على كل عنصر متجه:

function sleekZebraEffect() {
// inspired by - http://www.webdesignerwall.com/demo/css-gradient-text/
var text = "Sleek Zebra...";
var font = "100px Futura, Helvetica, sans-serif";

// save state
ctx.save();
ctx.font = font;

// getMetrics calculates:
// width + height of text-block
// top + middle + bottom baseline
var metrics = getMetrics(text, font);
var offsetRefectionY = -20;
var offsetY = 70;
var offsetX = 60;

// throwing a linear-gradient in to shine up the text
var gradient = ctx.createLinearGradient(0, offsetY, 0, metrics.height + offsetY);
gradient.addColorStop(0.1, '#000');
gradient.addColorStop(0.35, '#fff');
gradient.addColorStop(0.65, '#fff');
gradient.addColorStop(1.0, '#000');
ctx.fillStyle = gradient
ctx.fillText(text, offsetX, offsetY + metrics.top);

// draw reflected text
ctx.save();
ctx.globalCompositeOperation = "source-over";
ctx.translate(0, metrics.height + offsetRefectionY)
ctx.scale(1, -1);
ctx.font = font;
ctx.fillStyle = "#fff";
ctx.fillText(text, offsetX, -metrics.height - offsetY + metrics.top);
ctx.scale(1, -1);

// cut the gradient out of the reflected text 
ctx.globalCompositeOperation = "destination-out";
var gradient = ctx.createLinearGradient(0, offsetY, 0, metrics.height + offsetY);
gradient.addColorStop(0.0, 'rgba(0,0,0,0.65)');
gradient.addColorStop(1.0, '#000');
ctx.fillStyle = gradient;
ctx.fillRect(offsetX, offsetY, metrics.width, metrics.height);

// restore back to original transform state
ctx.restore();

// using source-atop to allow the transparent .png to show through to the gradient
ctx.globalCompositeOperation = "source-atop";

// creating pattern from <image> sourced.
ctx.fillStyle = ctx.createPattern(image, 'repeat');

// fill the height of two em-boxes, to encompass both normal and reflected state
ctx.fillRect(offsetX, offsetY, metrics.width, metrics.height * 2);
ctx.restore();
};

الظلال الداخلية/الخارجية في "لوحة الرسم"

لا تتناول مواصفات <canvas> موضوع الظلال "الداخلية" مقارنةً بالظلال "الخارجية". في الواقع، قد تعتقد في البداية أنّه لا يمكن استخدام الظل "الداخلي". هذا ليس صحيحًا. إنّ تفعيل هذه الميزة أصعب قليلاً. وكما هو مقترَح في مشاركة حديثة من F1LT3R، يمكنك إنشاء ظلال داخلية باستخدام السمات الفريدة لقواعد الالتفاف باتجاه عقارب الساعة أو عكسها. لإجراء ذلك، يمكنك إنشاء "ظل داخلي" من خلال رسم مستطيل حاوية، ثم استخدام قواعد الالتفاف المعاكس لرسم شكل مقطوع، ما يؤدي إلى إنشاء عكس الشكل.

يسمح المثال التالي بنمط نمط الظل الداخلي وfillStyle باستخدام اللون +التدرج+النمط في وقت واحد. يمكنك تحديد دوران النمط بشكل فردي، ويُرجى ملاحظة أنّ خطوط الحمار الوحشي أصبحت الآن متعامدة مع بعضها. يتم استخدام قناع اقتصاص بحجم مربّع الحدود، ما يزيل الحاجة إلى استخدام حاوية فائقة الحجم لإحاطة شكل القطع، ما يؤدي إلى تحسين السرعة من خلال منع معالجة الأجزاء غير الضرورية من الظل.

function innerShadow() {

function drawShape() { // draw anti-clockwise
ctx.arc(0, 0, 100, 0, Math.PI * 2, true); // Outer circle
ctx.moveTo(70, 0);
ctx.arc(0, 0, 70, 0, Math.PI, false); // Mouth
ctx.moveTo(-20, -20);
ctx.arc(30, -30, 10, 0, Math.PI * 2, false); // Left eye
ctx.moveTo(140, 70);
ctx.arc(-20, -30, 10, 0, Math.PI * 2, false); // Right eye
};

var width = 200;
var offset = width + 50;
var innerColor = "rgba(0,0,0,1)";
var outerColor = "rgba(0,0,0,1)";

ctx.translate(150, 170);

// apply inner-shadow
ctx.save();
ctx.fillStyle = "#000";
ctx.shadowColor = innerColor;
ctx.shadowBlur = getBlurValue(120);
ctx.shadowOffsetX = -15;
ctx.shadowOffsetY = 15;

// create clipping path (around blur + shape, preventing outer-rect blurring)
ctx.beginPath();
ctx.rect(-offset/2, -offset/2, offset, offset);
ctx.clip();

// apply inner-shadow (w/ clockwise vs. anti-clockwise cutout)
ctx.beginPath();
ctx.rect(-offset/2, -offset/2, offset, offset);
drawShape();
ctx.fill();
ctx.restore();

// cutout temporary rectangle used to create inner-shadow
ctx.globalCompositeOperation = "destination-out";
ctx.fill();

// prepare vector paths
ctx.beginPath();
drawShape();

// apply fill-gradient to inner-shadow
ctx.save();
ctx.globalCompositeOperation = "source-in";
var gradient = ctx.createLinearGradient(-offset/2, 0, offset/2, 0);
gradient.addColorStop(0.3, '#ff0');
gradient.addColorStop(0.7, '#f00');
ctx.fillStyle = gradient;
ctx.fill();

// apply fill-pattern to inner-shadow
ctx.globalCompositeOperation = "source-atop";
ctx.globalAlpha = 1;
ctx.rotate(0.9);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fill();
ctx.restore();

// apply fill-gradient
ctx.save();
ctx.globalCompositeOperation = "destination-over";
var gradient = ctx.createLinearGradient(-offset/2, -offset/2, offset/2, offset/2);
gradient.addColorStop(0.1, '#f00');
gradient.addColorStop(0.5, 'rgba(255,255,0,1)');
gradient.addColorStop(1.0, '#00f');
ctx.fillStyle = gradient
ctx.fill();

// apply fill-pattern
ctx.globalCompositeOperation = "source-atop";
ctx.globalAlpha = 0.2;
ctx.rotate(-0.4);
ctx.fillStyle = ctx.createPattern(image, 'repeat');
ctx.fill();
ctx.restore();

// apply outer-shadow (color-only without temporary layer)
ctx.globalCompositeOperation = "destination-over";
ctx.shadowColor = outerColor;
ctx.shadowBlur = 40;
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 10;
ctx.fillStyle = "#fff";
ctx.fill();
};

من خلال هذه الأمثلة، يمكنك الاطّلاع على أنّه باستخدام globalCompositeOperation، يمكننا تسلسل التأثيرات معًا، ما يؤدي إلى إنشاء تأثيرات أكثر تفصيلاً (باستخدام التمويه والمزج). الشاشة هي كل ما تحتاجه ;)

Spaceage: تأثيرات إبداعية

في <canvas>، الانتقال من حرف يونيكود 0x2708:

...إلى هذا المثال المظلل:

...يمكن تحقيقه من خلال استدعاءات متعددة لـ ctx.strokeText() مع عرض خط رفيع (0.25)، مع خفض الإزاحة x وألفا ببطء، لمنح عناصر المتجه لدينا الشعور بالحركة.

من خلال ربط موضع XY للعناصر بموجة جيبية/كوسينية، وتغيير الألوان باستخدام السمة HSL، يمكننا إنشاء تأثيرات أكثر إثارة للاهتمام، مثل مثال "الخطر البيولوجي" هذا:

HSL: Hue, Saturation, Lightness (1978)

إنّ تنسيق HSL هو تنسيق جديد متوافق مع مواصفات CSS3. على عكس تنسيق HEX الذي تم تصميمه للكمبيوترات، تم تصميم تنسيق HSL ليكون سهل القراءة.

شرح سهولة استخدام دالة HSL؛ وللتنقل بين نطاق الألوان، يتم ببساطة زيادة "تدرج اللون" من 360 درجة؛ حيث يتم تعيين تدرج اللون إلى الطيف بطريقة أسطوانية. تتحكّم درجة السطوع في مدى قتامة أو سطوع اللون، ويشير الرقم 0% إلى بكسل أسود، في حين يشير الرقم 100% إلى بكسل أبيض. يتحكم التشبع في مدى سطوع اللون أو ساطعه؛ يتم إنشاء اللون الرمادي بتشبع 0٪، ويتم إنشاء الألوان الزاهية باستخدام قيمة 100٪.

بما أنّ HSL هو معيار حديث، قد تحتاج إلى مواصلة إتاحة استخدام المتصفّحات القديمة، وهو ما يمكن من خلال تحويل مساحة الألوان. يقبل الرمز التالي عنصر HSL‏ { H: 360, S: 100, L: 100} ويُخرج عنصر RGB‏ { R: 255, G: 255, B: 255 }. من هنا، يمكنك استخدام هذه القيم لإنشاء سلسلة rgb أو rgba. لمزيد من المعلومات المفصّلة، يمكنك الاطّلاع على مقالة ويكيبيديا المفصّلة حول HSL.

// HSL (1978) = H: Hue / S: Saturation / L: Lightness
HSL_RGB = function (o) { // { H: 0-360, S: 0-100, L: 0-100 }
var H = o.H / 360,
    S = o.S / 100,
    L = o.L / 100,
    R, G, B, _1, _2;

function Hue_2_RGB(v1, v2, vH) {
if (vH < 0) vH += 1;
if (vH > 1) vH -= 1;
if ((6 * vH) < 1) return v1 + (v2 - v1) * 6 * vH;
if ((2 * vH) < 1) return v2;
if ((3 * vH) < 2) return v1 + (v2 - v1) * ((2 / 3) - vH) * 6;
return v1;
}

if (S == 0) { // HSL from 0 to 1
R = L * 255;
G = L * 255;
B = L * 255;
} else {
if (L < 0.5) {
    _2 = L * (1 + S);
} else {
    _2 = (L + S) - (S * L);
}
_1 = 2 * L - _2;

R = 255 * Hue_2_RGB(_1, _2, H + (1 / 3));
G = 255 * Hue_2_RGB(_1, _2, H);
B = 255 * Hue_2_RGB(_1, _2, H - (1 / 3));
}

return {
R: R,
G: G,
B: B
};
};

إنشاء صور متحركة باستخدام requestAnimationFrame

في السابق، كان هناك خياران لإنشاء صور متحركة في JavaScript، وهما setTimeout وsetInterval.

window.requestAnimationFrame، هو المعيار الجديد هنا ليحلّ محلّ كلاهما، ما يساهم في توفير الكهرباء في العالم (وتوفير بعض الوقت على جهاز الكمبيوتر) من خلال السماح للمتصفّح بتنظيم الرسوم المتحرّكة استنادًا إلى الموارد المتاحة. تشمل بعض الميزات المهمة ما يلي:

عندما يغادر المستخدم الإطار، يمكن أن يبطئ عرض الصورة المتحركة أو يتوقف تمامًا لمنع استخدام موارد غير ضرورية.
هناك حدّ أقصى لعدد اللقطات في الثانية يبلغ 60 لقطة في الثانية. وسبب ذلك هو أنه أعلى بكثير من المستوى الذي يمكن أن يلاحظه البشر (يرى معظم البشر بمعدل 30 لقطة في الثانية أن الرسوم المتحركة "سلسة").

في وقت كتابة هذه المقالة، يجب استخدام بادئات خاصة بالمورّد لاستخدام requestAnimationFrame. أنشأ "بول آيرش" طبقة shim متوافقة مع جميع المورّدين، في requestAnimationFrame لأجل الرسوم المتحركة الذكية:

// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
return  window.requestAnimationFrame       || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame    || 
        window.oRequestAnimationFrame      || 
        window.msRequestAnimationFrame     || 
        function(/* function */ callback, /* DOMElement */ element){
        window.setTimeout(callback, 1000 / 60);
        };
})();

وعلاوةً على ذلك، قد يربط المطوّرون الأكثر طموحًا ذلك مع مكوّن polyfill مثل requestAnimationFrame.js (هناك بعض الميزات التي يجب العمل عليها) التي يمكن أن تتوافق مع المتصفّحات القديمة إلى حدٍّ أكبر، أثناء التبديل إلى هذا المعيار الجديد.

(function animate() {
var i = 50;
while(i--) {
    if (n > endpos) return;

    n += definition;
    ctx.globalAlpha = (0.5 - (n + startpos) / endpos) * alpha;
    if (doColorCycle) {
        hue = n + color;
        ctx.strokeStyle = "hsl(" + (hue % 360) + ",99%,50%)"; // iterate hue
    }
    var x = cos(n / cosdiv) * n * cosmult; // cosine
    var y = sin(n / sindiv) * n * sinmult; // sin
    ctx.strokeText(text, x + xoffset, y + yoffset); // draw rainbow text
}
timeout = window.requestAnimationFrame(animate, 0);
})();

رمز المصدر

بفضل الدعم من جميع جهات تصنيع المتصفّحات، لا شك في مستقبل <canvas>، إذ يمكن نقله إلى ملفات التشغيل الخاصة بأجهزة iPhone/Android/Desktop باستخدام PhoneGap، أو

Titanium: