أمثلة التعليمات البرمجية لتنفيذ الرسوم المتحركة العادية والرسوم المتحركة للجسيمات في اللوحة القماشية

يتم استخدام اللوحة القماشية لرسم الصور والرسوم المتحركة على صفحات الويب، ويمكن فهمها على أنها لوحة قماشية، ويتم بناء التأثير المطلوب على هذه اللوحة القماشية.

يمكن للقماش رسم تأثيرات ديناميكية، بالإضافة إلى الرسوم المتحركة العادية شائعة الاستخدام، يمكن أيضًا استخدام مفهوم الجسيمات لتحقيق تأثيرات ديناميكية أكثر تعقيدًا. تستخدم هذه المقالة التأثيرات الديناميكية العادية والتأثيرات الخاصة للجسيمات لتنفيذ ساعة بسيطة.

تستخدم الرسوم المتحركة العادية واجهة برمجة تطبيقات Canvas لتحقيق أنماط ورسوم متحركة منتظمة.

تأثير

التأثير بسيط نسبيًا لتحقيقه، حيث نقوم بشكل أساسي بتحليل تنفيذ إزاحة الزاوية بين المقياس والمؤشر.

هذا المثال هو رسم لمقياس الساعة: هناك 12 ساعة على القرص، Math.PI هو 180 درجة، وكل ساعة تشغل 30 درجة.

.save() يعني حفظ حالة بيئة اللوحة القماشية الحالية والرسم على هذا الأساس. بعد اكتمال الرسم، يتم إرجاع حالة وسمات المسار المحفوظة مسبقًا.

الأمر نفسه ينطبق على مقياس الدقائق، فقط قم بتغيير الزاوية والنمط.

 // مقياس الوقت بالساعة offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // مقياس اللون offscreenCanvasCtx.strokeStyle = '#fff'; lineWidth = 3; // احتلال 30 درجة كل ساعة offscreenCanvasCtx.rotate(Math.PI / 6); // موضع البداية للرسم offscreenCanvasCtx.lineTo(140, 0) // الموضع النهائي للرسم؛ offscreenCanvasCtx(120, 0); يعيد() ؛

خذ عقرب الثواني كمثال: احصل على ثواني الوقت الحالي واحسب زاوية الإزاحة المقابلة

 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr > 12 ? hr - 12 : hr; save (); offscreenCanvasCtx.rotate(sec * (Math.PI / 30) ......) ؛ offscreenCanvasCtx.stroke();

يمكن استخدام اللوحة القماشية لرسم رسوم متحركة معقدة وغير منتظمة. يمكن استخدام تأثيرات الجسيمات لتحقيق تأثيرات ديناميكية عشوائية معقدة.

تشير الجسيمات إلى كل بكسل في بيانات الصورة imageData . بعد الحصول على كل بكسل، قم بإضافة سمات أو أحداث للتفاعل مع الجسيمات الموجودة في المنطقة لتحقيق تأثيرات ديناميكية.

تأثير

خذ تحويل الصورة في الشكل أدناه كمثال، ويكون التأثير أولًا هو عرض الصورة على اللوحة القماشية، ثم الحصول على كل بكسل في المنطقة التي يوجد بها النص.

 Let image = new Image(); image.src='../image/logo.png'; السماح للبكسلات=[]; // تخزين بيانات البكسل imageData; قم بعرض الصورة واحصل على معلومات البكسل في المنطقة image.onload=function(){ ctx.drawImage(image,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); image.width)/2,(canvas.height-image.height)/2,image.width,image.height); // احصل على معلومات بكسل المخطط // ارسم الصورة};

حجم الصورة هو 300*300، بإجمالي 90,000 بكسل، كل بكسل يشغل 4 بتات ويخزن بيانات rgba.

 function getPixels(){ var pos=0; var data=imageData.data; // بيانات صفيف RGBA أحادية البعد // ارتفاع وعرض الصورة المصدر 300 بكسل for(var i=1;i<=image.width ;i++ ){ for(var j=1;j<=image.height;j++){ pos=[(i-1)*image.width+(j-1)]*4; // احصل على موضع البكسل if(data[pos]>=0){ var Pixel={ x:(canvas.width-image.width)/2+j+Math.random()*20, // إعادة ضبط كل بكسل معلومات الموضع ذ: (canvas.height-image.height)/2+i+Math.random()*20، // إعادة تعيين معلومات الموضع لكل بكسل fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' }pixel.push(pixel); } } } } function drawPixels() { var Canvas = document.getElementById(myCanvas); Canvas.getContext(2d); ctx.clearRect(0,0,canvas.width,canvas.height); var len = Pixels.length, curr_pixel = null; = بكسل[i]; ctx.fillStyle = curr_pixel.fillStyle; curr_pixel.y, 1, 1);

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

 function time() { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150pxold; ctx.textBaseline='top'; ctx.fillStyle = rgba(245,245,245,0.2); (جديد Date().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight });

تأثير

مفهوم جزيئات تحويل النص هو نفسه المذكور أعلاه، حيث يتم الحصول على وحدات البكسل الموجودة في المنطقة المحددة واختيارها وفقًا لشروط التصفية وتخزينها في المصفوفة. إعادة الرسم بعد الاجتياز.

 function getPixels(){ Let imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); Let data = imgData.data PixelsArr = [] for(let i=1;i<=textHeight;i++){ for(let j=1;j<=textWidth;j++){ pos=[(i-1)*textWidth+(j-1)]*4; // احصل على موضع البكسل if(data[pos]>=0){ var Pixel={ x:j+Math.random()* 20 , // إعادة تعيين معلومات موضع كل بكسل y:i+Math.random()*20, // إعادة تعيين معلومات الموضع لكل بكسل fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' }pxsArr.push(pixel);

يحفظ imgData معلومات البكسل في المنطقة المحددة، ويشغل كل بكسل 4 بتات، ويحفظ معلومات RGBA ذات أربع بتات. من خلال تصفية البت الرابع من كل بكسل، يحفظ هذا الكود جميع وحدات البكسل بشفافية لا تساوي 0 في المصفوفة pixelsArr .

يسجل x و y معلومات موضع الجسيم من أجل إنتاج تأثير الحركة في العرض، تتم إضافة موضع إزاحة من 0 إلى 20 بكسل لكل جسيم في كل مرة يتم إعادة رسمها، يتم إنشاء موضع الإزاحة بشكل عشوائي تأثير.

بعد الحصول على الجزيئات، تحتاج إلى مسح النص الأصلي في اللوحة القماشية وإعادة رسم الجزيئات التي تم الحصول عليها على اللوحة القماشية.

 function drawPixels() { // امسح محتوى اللوحة القماشية وأعد رسمها ctx.clearRect(0,0,canvas.width,canvas.height); for (let i in PixelsArr) { ctx.fillStyle =pixelsArr[i].fillStyle; r = Math.random()*4 ctx.fillRect(pixelsArr[i].x, PixelsArr[i].y, r, ص)؛ } }

أسلوب إعادة رسم الجسيمات هو اللون الأصلي والشفافية عند تصفية البكسلات، وعندما يتم رسم كل جسيم على القماش، يتم تحديد معلمة الحجم r، وقيمة r هي رقم عشوائي من 0 إلى 4. يتم تحديد حجم الجزيئات الناتجة بشكل عشوائي.

بعد الحصول على الجسيمات وإعادة الرسم بنجاح، يجب تحديث الصفحة في الوقت الفعلي. يتم استخدام طريقة window.requestAnimationFrame(callback) هنا.

 function time() { ...... getpixels(); // احصل على الجزيئات drawPixels();

تخبر طريقة window.requestAnimationFrame(callback) المتصفح أنك تريد تنفيذ الرسوم المتحركة وتطلب من المتصفح استدعاء الوظيفة المحددة لتحديث الرسوم المتحركة قبل إعادة الرسم التالية. تأخذ هذه الطريقة وظيفة رد الاتصال كمعلمة، والتي سيتم استدعاؤها قبل إعادة رسم المتصفح.

لا تتطلب هذه الطريقة تحديد فاصل زمني، ويعتمد تردد الاتصال على الفاصل الزمني للنظام (1 ثانية).

شرح الوثيقة اضغط هنا

تأثير

تحقق هذه المقالة بشكل أساسي التأثير الديناميكي للساعة بطريقتين مختلفتين، من بينها أن ساعة الجسيمات تتمتع بقابلية تشغيل أكبر. في سلسلة اللوحات المستقبلية، سيتم تنفيذ المزيد من التأثيرات الديناميكية لنظام الجسيمات.

ما ورد أعلاه هو المحتوى الكامل لهذه المقالة وآمل أن يكون مفيدًا لدراسة الجميع وآمل أيضًا أن يدعم الجميع شبكة VeVb Wulin.