ตัวอย่างโค้ดสำหรับการนำแอนิเมชันปกติและแอนิเมชันของอนุภาคไปใช้ในแคนวาส

Canvas ใช้สำหรับวาดภาพและภาพเคลื่อนไหวบนหน้าเว็บ สามารถเข้าใจได้ว่าเป็น Canvas และเอฟเฟกต์ที่ต้องการนั้นถูกสร้างขึ้นบนผืนผ้าใบนี้

Canvas สามารถวาดเอฟเฟกต์ไดนามิกได้ นอกเหนือจากแอนิเมชั่นทั่วไปที่ใช้กันทั่วไปแล้ว แนวคิดของอนุภาคยังสามารถนำมาใช้เพื่อให้ได้เอฟเฟกต์ไดนามิกที่ซับซ้อนมากขึ้นอีกด้วย

แอนิเมชั่นทั่วไปใช้ Canvas API เพื่อให้ได้รูปแบบและแอนิเมชั่นปกติ

ผล

ผลลัพธ์ที่ได้นั้นค่อนข้างง่ายในการบรรลุผล ส่วนใหญ่เราจะวิเคราะห์การใช้งานการชดเชยมุมระหว่างสเกลและตัวชี้

ตัวอย่างนี้เป็นการวาดมาตราส่วนชั่วโมง: บนหน้าปัดมี 12 ชั่วโมง Math.PI คือ 180° และแต่ละชั่วโมงมี 30°

.save() หมายถึงการบันทึกสถานะของสภาพแวดล้อม Canvas ปัจจุบันและวาดบนพื้นฐานนี้ หลังจากการวาดเสร็จสิ้น สถานะเส้นทางและคุณลักษณะที่บันทึกไว้ก่อนหน้านี้จะถูกส่งกลับ

เช่นเดียวกับสเกลนาที เพียงเปลี่ยนมุมและสไตล์

 // มาตราส่วนเวลารายชั่วโมง offscreenCanvasCtx.save(); for (var i = 0; i < 12; i++) { offscreenCanvasCtx.beginPath(); // Scale color offscreenCanvasCtx. strokeStyle = '#fff'; lineWidth = 3; // ครอบครอง 30° ทุกชั่วโมง offscreenCanvasCtx.rotate(Math.PI / 6); // ตำแหน่งเริ่มต้นของการวาด offscreenCanvasCtx.lineTo(140, 0) // ตำแหน่งของการวาด offscreenCanvasCtx.lineTo(120, 0); // คืนค่า() ;

ยกตัวอย่างเข็มวินาที: หาวินาทีของเวลาปัจจุบันและคำนวณมุมออฟเซ็ตที่สอดคล้องกัน

 var now = new Date(), sec = now.getSeconds(), min = now.getMinutes(), hr = now.getHours(); hr = hr > 12 ? hr - 12 : hr; //มือสอง บันทึก (); offscreenCanvasCtx.rotate(วินาที * (Math.PI / 30)); ...... offscreenCanvasCtx.จังหวะ();

Canvas สามารถใช้วาดภาพเคลื่อนไหวที่ซับซ้อนและไม่สม่ำเสมอได้ เอฟเฟกต์อนุภาคสามารถใช้เพื่อให้เกิดเอฟเฟกต์ไดนามิกที่ซับซ้อนและสุ่มได้

อนุภาคอ้างอิงถึงแต่ละพิกเซลในข้อมูลรูปภาพ imageData หลังจากได้รับแต่ละพิกเซลแล้ว ให้เพิ่มแอตทริบิวต์หรือเหตุการณ์เพื่อโต้ตอบกับอนุภาคในพื้นที่เพื่อให้ได้เอฟเฟกต์แบบไดนามิก

ผล

นำการแปลงรูปภาพในรูปด้านล่างเป็นตัวอย่าง ผลลัพธ์คือการแสดงรูปภาพบนผืนผ้าใบก่อน จากนั้นจึงรับแต่ละพิกเซลในบริเวณที่มีข้อความอยู่

 ให้ image = new Image(); image.src='../image/logo.png'; // พิกเซลการจัดเก็บ ให้ imageData; image.width = 300; เรนเดอร์รูปภาพและรับข้อมูลพิกเซลในพื้นที่ image.onload=function(){ ctx.drawImage(รูปภาพ,(canvas.width-image.width)/2,(canvas.height-image.height)/2,image.width,image.height); imageData=ctx.getImageData((canvas.width- image.width)/2,(canvas.height-image.height)/2,image.width,image.height); //รับข้อมูลพิกเซลของแผนภูมิ //วาดภาพ};

ขนาดของรูปภาพคือ 300*300 โดยมีทั้งหมด 90,000 พิกเซล แต่ละพิกเซลใช้พื้นที่ 4 บิตและเก็บข้อมูล rgba

 ฟังก์ชั่น getPixels(){ var pos=0; var data=imageData.data; //ข้อมูลอาร์เรย์หนึ่งมิติของ RGBA //ความสูงและความกว้างของรูปภาพต้นฉบับคือ 300px for(var i=1;i<=image. width;i++ ){ สำหรับ(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, // รีเซ็ตแต่ละพิกเซล ข้อมูลตำแหน่ง y: (canvas.height-image.height)/2+i+Math.random()*20, //รีเซ็ตข้อมูลตำแหน่งของแต่ละพิกเซล fillStyle:'rgba('+data[pos]+','+(data[pos+1])+','+(data[pos+2])+', ' +(data[pos+3])+')' }pixels.push(pixel); } } } } ฟังก์ชั่น DrawPixels() { var canvas = document.getElementById(myCanvas); canvas.getContext(2d); ctx.clearRect(0,0,canvas.width,canvas.height); var len =pixel.length, curr_pixel = null; สำหรับ (var i = 0; i <len; i++) { curr_pixel = พิกเซล [i]; ctx.fillStyle = curr_pixel.fillStyle; ctx.fillRect(curr_pixel.x, curr_pixel.y, 1, 1);

แสดงนาฬิกาข้อความ

 เวลาทำงาน () { ctx.clearRect(0,0,canvas.width,canvas.height) ctx.font = 150px ตัวหนา; ctx.textBaseline='top'; ctx.fillStyle = rgba(245,245,245,0.2); (ใหม่ วันที่().format('hh:mm:ss'),(canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); }

ผล

แนวคิดของอนุภาคการแปลงข้อความเหมือนกับด้านบน ได้รับพิกเซลในพื้นที่ที่เลือก เลือกตามเงื่อนไขตัวกรองและจัดเก็บไว้ในอาร์เรย์ วาดใหม่หลังจากการข้ามผ่าน

 ฟังก์ชัน getPixels(){ la imgData = ctx.getImageData((canvas.width-textWidth)/2,(canvas.height-textHeight)/2,textWidth,textHeight); ให้ data = imgData.datapixelArr = [] สำหรับ(let i=1;i<=textHeight;i++){ สำหรับ(ให้ 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])+', ' +(ข้อมูล[pos+3])+' };pixelArr.push(pixel); } } } }

imgData บันทึกข้อมูลพิกเซลในพื้นที่ที่เลือก แต่ละพิกเซลใช้พื้นที่ 4 บิต และบันทึกข้อมูล RGBA สี่บิต การกรองบิตที่สี่ของแต่ละพิกเซล โค้ดนี้จะบันทึกพิกเซลทั้งหมดด้วยความโปร่งใสที่ไม่ใช่ 0 ในอาร์เรย์ pixelsArr

x และ y บันทึกข้อมูลตำแหน่งของอนุภาค เพื่อสร้างเอฟเฟกต์การเคลื่อนไหวในการเรนเดอร์ ตำแหน่งออฟเซ็ต 0-20 พิกเซลจะถูกเพิ่มลงในแต่ละอนุภาค แต่ละครั้งที่มีการวาดใหม่ ตำแหน่งออฟเซ็ตจะถูกสร้างขึ้นแบบสุ่มเพื่อสร้าง การเคลื่อนไหว

หลังจากได้รับอนุภาคแล้ว คุณจะต้องล้างข้อความต้นฉบับบนผืนผ้าใบและวาดอนุภาคที่ได้รับใหม่บนผืนผ้าใบ

 ฟังก์ชั่น DrawPixels() { // ล้างเนื้อหาแคนวาสและวาดใหม่ ctx.clearRect(0,0,canvas.width,canvas.height); for (let i inpixelsArr) { ctx.fillStyle =pixelArr[i].fillStyle; r = Math.random()*4 ctx.fillRect(pixelsArr[i].x,pixelArr[i].y, r, ร);

รูปแบบของการวาดอนุภาคใหม่จะเป็นสีดั้งเดิมและความโปร่งใสเมื่อกรองพิกเซล และเมื่อแต่ละอนุภาคถูกวาดบนผืนผ้าใบ พารามิเตอร์ขนาด r จะถูกกำหนด และค่าของ r จะเป็นตัวเลขสุ่มตั้งแต่ 0 ถึง 4 อนุภาคที่ได้จะมีขนาดแบบสุ่ม

หลังจากได้รับอนุภาคและวาดใหม่เรียบร้อยแล้ว จะต้องรีเฟรชหน้าแบบเรียลไทม์ ใช้เมธอด window.requestAnimationFrame(callback) ที่นี่

 เวลาทำงาน () { ...... getpixels (); // รับอนุภาค DrawPixels (); // วาดอนุภาคใหม่ requestAnimationFrame (เวลา)

เมธอด window.requestAnimationFrame(callback) จะบอกเบราว์เซอร์ว่าคุณต้องการแสดงภาพเคลื่อนไหว และขอให้เบราว์เซอร์เรียกใช้ฟังก์ชันที่ระบุเพื่ออัปเดตภาพเคลื่อนไหวก่อนที่จะวาดใหม่ครั้งถัดไป เมธอดนี้ใช้ฟังก์ชันการโทรกลับเป็นพารามิเตอร์ ซึ่งจะถูกเรียกก่อนที่เบราว์เซอร์จะวาดใหม่

วิธีนี้ไม่จำเป็นต้องกำหนดช่วงเวลา และความถี่ในการโทรจะใช้ช่วงเวลาของระบบ (1 วินาที)

คำอธิบายเอกสาร คลิกที่นี่

ผล

บทความนี้กล่าวถึงเอฟเฟกต์ไดนามิกของนาฬิกาเป็นหลักในสองวิธีที่แตกต่างกัน โดยที่นาฬิกาอนุภาคมีความสามารถในการทำงานมากกว่า ในซีรีส์แคนวาสในอนาคต จะมีการนำเอฟเฟกต์ไดนามิกเพิ่มเติมมาใช้กับระบบอนุภาค

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network