تعليق: تشرح هذه المقالة كيفية استخدام تقنية ذاكرة التخزين المؤقت لتنفيذ السحب المسبق ، وتقليل الرسم المتكرر لمحتوى Canvs ، وتجنب استخدام إحداثيات النقطة العائمة لتحسين أداء قماش HTML5. يمكن للأصدقاء المهتمين الرجوع إليها ، على أمل أن يكون مفيدًا للجميع.
استخدم تقنية التخزين المؤقت لتحقيق السحب المسبق لتقليل الرسم المتكرر لمحتوى Canvsفي كثير من الأحيان ، نقوم برسم وتحديث على القماش ، ونحتفظ دائمًا ببعض المحتوى الذي لم يتغير لهذه المحتويات.
يجب أن تكون ذاكرة التخزين المؤقت مسبقًا ، وليس كل تحديث.
يتم رسم الرمز مباشرة على النحو التالي:
context.font = "24px arial" ؛
context.fillStyle = "Blue" ؛
context.fillText ("يرجى الضغط على <ech> للخروج من لعبة" ، 5،50) ؛
requestAnimationFrame (render) ؛
باستخدام تقنيات الرصاص قبل ذاكرة التخزين المؤقت:
تقديم الوظيفة (السياق) {
conext.drawImage (mtext_canvas ، 0 ، 0) ؛
requestAnimationFrame (render) ؛
}
وظيفة drawText (السياق) {
mtext_canvas = document.createElement ("canvas") ؛
mtext_canvas.width = 450 ؛
mtext_canvas.Height = 54 ؛
var m_context = mtext_canvas.getContext ("2d") ؛
m_context.font = "24px arial" ؛
m_context.fillStyle = "Blue" ؛
m_context.filltext ("يرجى الضغط على <ech> للخروج من لعبة" ، 5،50) ؛
}
عند استخدام تقنية رسم Canvas ذاكرة التخزين المؤقت ، تذكر أن حجم كائن Cache Canvas أقل من حجم القماش الفعلي. حاول وضع عمليات رسم خطوط مستقيمة معًا ، وحاول رسمها مرة واحدة. الرمز السيئ هو كما يلي:
لـ (var i = 0 ؛ i <points.length - 1 ؛ i ++) {
var p1 = النقاط [i] ؛
var p2 = النقاط [i+1] ؛
context.beginPath () ؛
context.moveto (p1.x ، p1.y) ؛
context.lineto (p2.x ، p2.y) ؛
سياق. ضربة () ؛
}
الرمز ذو الأداء الأعلى بعد التعديل هو كما يلي:
context.beginPath () ؛
لـ (var i = 0 ؛ i <points.length - 1 ؛ i ++) {
var p1 = النقاط [i] ؛
var p2 = النقاط [i+1] ؛
context.moveto (p1.x ، p1.y) ؛
context.lineto (p2.x ، p2.y) ؛
}
سياق. ضربة () ؛
تجنب التبديل المتكرر لحالات رسم قماش غير ضرورية. مثال على نمط الرسم في كثير من الأحيان هو كما يلي:
var gap = 10 ؛
لـ (var i = 0 ؛ i <10 ؛ i ++) {
context.fillStyle = (i ٪ 2؟ "Blue": "Red") ؛
context.fillRect (0 ، i * GAP ، 400 ، GAP) ؛
}
تجنب التبديل المتكرر لحالات الرسم ، وأفضل رمز رسم الأداء على النحو التالي:
// حتى
context.fillStyle = "Red" ؛
لـ (var i = 0 ؛ i <5 ؛ i ++) {
context.fillRect (0 ، (i * 2) * GAP ، 400 ، GAP) ؛
}
// غريب
context.fillStyle = "Blue" ؛
لـ (var i = 0 ؛ i <5 ؛ i ++) {
context.fillRect (0 ، (i * 2+1) * GAP ، 400 ، GAP) ؛
}
عند الرسم ، ارسم فقط المناطق التي تحتاج إلى تحديث ، وتجنب الرسم المكررة غير الضروري وتكاليف النفقات العامة في أي وقت. بالنسبة لرسم المشهد المعقد ، يتم استخدام تقنية الرسم الهرمية ، والتي تنقسم إلى الرسم الأمامي والخلفية. حدد طبقة قماش
HTML كما يلي:
<canvas>
</canvas>
<canvas>
<span> </tanvas>
</span>
إذا لم يكن ذلك ضروريًا ، فحاول تجنب آثار الرسم مثل الظلال ، والضافات ، إلخ.
تجنب استخدام إحداثيات النقطة العائمة
عند رسم رسم بياني ، يجب تحديد الأعداد الصحيحة بدلاً من أرقام الفاصلة العائمة. والسبب هو أن Canvas يدعم رسم نصف بكسل لتنفيذ خوارزمية الاستيفاء على أساس الأماكن العشرية لتحقيق تأثير مضاد للتشويش في رسم الصور. إذا لم يكن ذلك ضروريًا ، فالرجاء عدم تحديد قيم النقطة العائمة.
امسح محتوى الرسم على القماش:
context.clearrect (0 ، 0 ، canvas.width ، canvas.height)
ولكن في الواقع ، هناك أيضًا طريقة تشبه الاختراق في قماش:
canvas.width = canvas.width ؛
يمكن أن يحقق أيضًا تأثير تطهير المحتوى على القماش ، ولكن قد لا يتم دعمه في بعض المتصفحات.