تقدم هذه المقالة تأثير HTML5 Canvas للعب الجدول الزمني المذهل المذهل ، على النحو التالي:
كما هو مبين في الشكل أعلاه ، فإن هذه المقالة هي تحقيق التأثير أعلاه.
لأن Alloytouch كتب مؤخرًا تأثير تحميل بارد وبارد. وبالتالي فإن مخطط تقدم الموجة الكبيرة المفضلة.
بادئ ذي بدء ، يجب أن نحزم مكون التقدم في صورة الموجة الكبيرة. المبدأ الأساسي هو استخدام القماش لرسم مخططات المتجهات ومواد الصور لتوليف التأثير الخاص الموجة.
فهم QuadraticCurvetoيتم استخدام طريقة QuadraticCurveto () لإضافة نقطة إلى المسار الحالي باستخدام نقطة التحكم المحددة لمنحنى Bessel الثاني.
بناء جملة JavaScript:
context.quadraticCurveto (CPX ، CPY ، X ، Y) ؛المعلمة
X إحداثيات من نقطة التحكم في CPX Bessel
CPY Bessel Control Point y إحداثيات
X إحداثيات في نقطة نهاية x
y أغطية في نقطة نهاية y
يحب:
CTX.Moveto (20،20) ؛
من خلال الكود أعلاه ، يمكنك رسم منحنى Bessel الثاني.
حاول رسم الأمواج var wavewidth = 300 ، Offset = 0 ، waveheight = 8 ، wavecount = 5 ، startx = -100 ، starty = 208 ، progress = 0 ، progressTep = 1 ، d2 = wavewidth / waveCount ، = d2 / 2 ، hd = d / 2 ، c = document.getElementByid (mycanvas) ، ctx = c.getContext (2d) ؛ == D2) الإزاحة = 0 ؛ لـ (var i = 0 ؛ i <wavecount ؛ i ++) {var dx = i * d2 ؛ OffsetX + HD ، الإزاحة -waveHeight ، OffsEdx + D2 ؛يمكنك رؤية موجات التمرين اللانهائي:
الاحتياجات الرئيسية هنا.
إذا حصلت على استنساخ الكود ، فيمكنك محاولة رسمه إلى قماش كبير.
هنا ، إذا كان (-1 إزاحة === D2) إزاحة = 0 ؛
D2 هو طول وادي الذروة. بعد ذروة+وادي ، بدأت دورة الحياة نفسها في البدء بنفس دورة الحياة مثل 0 ، بحيث يمكن إعادة تعيينها إلى 0.
فهم GlobalCompositeOperationتوضح خصائص GlobalCompositeOperation كيف يتم دمج اللون المرسوم على القماش مع اللون الموجود على القماش.
ارسم مخطط تقدم موجة كبيرة لاستخدامه:
ctx.globalcompositeOperation = الوجهة -top ؛
أهمية الوجهة: سيتم الاحتفاظ بالمحتوى الموجود على القماش فقط حيث يتداخل مع الرسم الجديد. يتم رسم الرقم الجديد بعد المحتوى.
بطبيعة الحال ، هناك العديد من الخيارات للـ GlobalCompositepration.
التنفيذ العام var img = new Image () img.onload = function () {tick () ؛} ؛لكي تكون بسيطة ومباشرة ، إليك الكود الذي يتغلف محملًا ، ويتم تعيين SRC مباشرة من خلال صورة جديدة لتحميل الصورة.
بعد رسم مخطط متجه ، قم بتعيين GlobalCompositeOperation ، ثم ارسم صورة البطريق.
في النهاية
مثال تنزيل: العرض التوضيحي
ما سبق هو كل محتويات هذا المقال.