قبل أيام قليلة ، استخدمت نمط CSS و JS لتكريم الواجهة المماثلة لـ GitHub404. من github404 من خلال قماش.
الاداءات
دليل الملف موارد الملفيتم تقديم رمز مصدر الملف والصورة في نهاية المقالة
شفرةجسم صفحة الويب
فيما يلي عنصر محدد جيدًا وعالي المستوى للقماش. يتم تحميل علامات IMG هذه من هذه الصور ، وليس علينا تحميلها في JS ، ثم ضبط الصورة على عرضها: لا شيء.
<Body> <canvas id = mycanvas width = 1680 height = 630 margin: 0 ؛ NONE> <img src = : none> <img src =./images/speeder.png style = display: none> <img src =. = Display: none> <img src =.جزء JS
1. هنا ما زلت أقوم ببناء كائن JSON جديد يسمى github404 لتغليف جميع المعلمات والأساليب
2. قم بإنشاء كائن IMGDATA ، ثم استخدم المعلمات المطلوبة لجميع IMG في PS: أعلى ويترك لتحديد المواقع عند استخدام طريقة DrawImage () لحساب الصورة المقابلة لحركة الماوس عند تحريكها حركة الماوس.
3. يتم استخدام طريقة theinit () لتهيئة ، وهي واجهة مع الواجهة الخارجية
4. تنفيذ طريقة الرسم هو اجتياز IMGDATA [] في حلقة في الدورات ، ثم تعيين قيمة بدورها. انتبه لاستخدام طريقة ctx.clearrect () لمسح القماش أول جوهر فارغ فارغ
<script> vargithub404 = {imgdata: {// يسجل معلومات جميع الصور في JSON BG: {TOP: 0 ، اليسار: 110 ، // TOP ، واليسرى لتحديد المواقع. مقياس مسار الصورة: 0.06 ، // عندما يتحرك الماوس ، نسبة الحركة المقابلة للصورة} ، Building_2: {TOP: 133 ، اليسار: 1182 ، SRC: './images/building_2 .png' ، المقياس: 0.05 ،} ، Building_1: {TOP: 79 ، اليسار: 884 ، SRC: '. /speeder_shadow.png '، المقياس: 0.01 ،} ، cat_shadow: {top: 288 ، اليسار: 667 ، src:'. ، src: './images/speeder.png' ، المقياس: 0.01 ،} ، cat: {top: 88 ، اليسار: 656 ، src: './images/cale.png' ، المقياس: 0.05 ،} ، النص: {TOP: 70 ، اليسار: 364 ، SRC: '. قماشية ارتفاع الخلفية وعرضها: document.queeryselector ('#mycanvas') ، // الحصول على عنصر القماش init: function () .se.se.se.se.se. document.body.client عرض var ؛ CTX = this.canvas.getcon text ('2d') ؛ ]. } ، excloymousevent: function () {var = this ؛时重新画图的方法 دع ctx = this.canvas.getContext ('2d') ؛ Image = new Image () ؛ أعلى ، المعلمة عند الرسم أدناه ، image.width ، image.height) ؛}}} window.onload = function () {// فقط استدعاء طريقة init لـ github404 لتغليف البيانات github404.init () ؛} </script> لخصهذه المرة باستخدام قماش لإكمال هذا التأثير الديناميكي ، لقد تعلمت المزيد عن استخدام القماش. اجعلني في نفس الوقت
هناك فهم أعمق لكيفية تنظيم رمز بيانات التغليف والأساليب باستخدام كائن JSON.
ما سبق هو كل محتويات هذا المقال.