canvas confetti

การสาธิต

catdad.github.io/canvas-confetti

ติดตั้ง

คุณสามารถติดตั้งโมดูลนี้เป็นส่วนประกอบจาก NPM:

npm install --save canvas-confetti

จากนั้นคุณสามารถ require('canvas-confetti'); เพื่อใช้ในการสร้างโครงการของคุณ หมายเหตุ: นี่คือส่วนประกอบไคลเอนต์และจะไม่ทำงานในโหนด คุณจะต้องสร้างโครงการของคุณด้วย WebPack เพื่อใช้สิ่งนี้

นอกจากนี้คุณยังสามารถรวมไลบรารีนี้ในหน้า HTML ของคุณได้โดยตรงจาก CDN:

 < script src =" https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.min.js " > </ script >

หมายเหตุ: คุณควรใช้เวอร์ชันล่าสุดในเวลาที่คุณรวมโครงการของคุณ คุณสามารถดูทุกเวอร์ชันในหน้าเผยแพร่

ลดการเคลื่อนไหว

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

API

เมื่อติดตั้งจาก npm ไลบรารีนี้สามารถใช้เป็นส่วนประกอบไคลเอนต์ในการสร้างโครงการของคุณ เมื่อใช้เวอร์ชัน CDN จะถูกเปิดเผยเป็นฟังก์ชั่น confetti บน window

confetti([options {Object}]) → Promise|null

confetti ใช้วัตถุเสริมเดียว เมื่อ window.Promise พร้อมใช้งานมันจะส่งคืนสัญญาที่จะแจ้งให้คุณทราบเมื่อเสร็จสิ้น เมื่อสัญญาไม่พร้อมใช้งาน (เช่นใน IE) มันจะกลับ null คุณสามารถสัญญากับโพลีฟิลด์โดยใช้โพลีฟิลด์ยอดนิยมใด ๆ นอกจากนี้คุณยังสามารถให้คำสัญญากับการดำเนินการกับ confetti ผ่าน:

 const MyPromise = require ( 'some-promise-lib' ) ;
const confetti = require ( 'canvas-confetti' ) ;
confetti . Promise = MyPromise ;

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

options

พารามิเตอร์ confetti เป็นวัตถุ options ทางเลือกเดียวซึ่งมีคุณสมบัติดังต่อไปนี้:

• จำนวนเต็ม particleCount (ค่าเริ่มต้น: 50) : จำนวนลูกปาที่จะเปิดตัว มากกว่านี้สนุกเสมอ ... แต่เจ๋งมีคณิตศาสตร์มากมายที่เกี่ยวข้อง
• หมายเลข angle (ค่าเริ่มต้น: 90) : มุมที่จะเปิดลูกปาในองศา 90 ตรงขึ้น
• หมายเลข spread (ค่าเริ่มต้น: 45) : Center Center สามารถไปได้ไกลแค่ไหนในองศา 45 หมายถึงลูกปาจะเปิด angle ที่กำหนดบวกหรือลบ 22.5 องศา
• หมายเลข startVelocity (ค่าเริ่มต้น: 45) : ลูกปาเร็วแค่ไหนที่จะเริ่มไปในพิกเซล
• หมายเลข decay (ค่าเริ่มต้น: 0.9): ลูกปาจะสูญเสียความเร็วเร็วแค่ไหน เก็บหมายเลขนี้ไว้ระหว่าง 0 ถึง 1 มิฉะนั้นลูกปาจะได้รับความเร็ว ยังดีกว่าแค่ไม่เคยเปลี่ยนแปลง
• หมายเลข gravity (ค่าเริ่มต้น: 1): อนุภาคถูกดึงลงเร็วแค่ไหน 1 คือแรงโน้มถ่วงเต็ม 0.5 เป็นแรงโน้มถ่วงครึ่ง ฯลฯ แต่ไม่มีข้อ จำกัด คุณสามารถสร้างอนุภาคได้หากคุณต้องการ
• หมายเลข drift (ค่าเริ่มต้น: 0): เท่าไหร่ที่ลูกปาจะลอย ค่าเริ่มต้นคือ 0 ซึ่งหมายความว่าพวกเขาจะล้มลงตรง ใช้จำนวนลบสำหรับจำนวนซ้ายและบวกทางขวา
• บูลีน flat (ค่าเริ่มต้น: เท็จ) : ทางเลือกปิดการเอียงและการโยกเยกที่ลูกปาสามมิติจะมีในโลกแห่งความเป็นจริง ใช่พวกเขาดูเศร้าเล็กน้อย แต่คุณขอให้พวกเขาดังนั้นอย่าโทษฉัน
• หมายเลข ticks (ค่าเริ่มต้น: 200) : ลูกปากี่ครั้งจะย้าย นี่เป็นนามธรรม ... แต่เล่นกับมันถ้าลูกปาหายไปเร็วเกินไปสำหรับคุณ
• origin Object : จะเริ่มยิงลูกปาจาก อย่าลังเลที่จะเปิดหน้าจอหากคุณต้องการ
  • origin.x หมายเลข (ค่าเริ่มต้น: 0.5) : ตำแหน่ง x บนหน้าโดย 0 เป็นขอบซ้ายและ 1 เป็นขอบด้านขวา
  • origin.y Number (ค่าเริ่มต้น: 0.5) : ตำแหน่ง y บนหน้าโดย 0 เป็นขอบด้านบนและ 1 เป็นขอบด้านล่าง
• อาร์เรย์ colors <String> : อาร์เรย์ของสตริงสีในรูปแบบ hex ... คุณรู้ไหมเช่น #bada55
• shapes อาร์เรย์ <String | Shape> : อาร์เรย์ของรูปร่างสำหรับลูกปา มี 3 ค่าในตัวของ square circle และ star ค่าเริ่มต้นคือการใช้ทั้งสี่เหลี่ยมและวงกลมในการผสมผสานที่สม่ำเสมอ ในการใช้รูปร่างเดียวคุณสามารถให้รูปร่างเดียวในอาร์เรย์เช่น ['star'] นอกจากนี้คุณยังสามารถเปลี่ยนการผสมผสานได้โดยให้ค่าเช่น ['circle', 'circle', 'square'] เพื่อใช้วงกลมสองตัวสองตัวและสี่เหลี่ยมที่สาม นอกจากนี้คุณยังสามารถสร้างรูปร่างของคุณเองโดยใช้ confetti.shapeFromPath หรือ confetti.shapeFromText HELPER วิธีการ
• หมายเลข scalar (ค่าเริ่มต้น: 1) : สเกลปัจจัยสำหรับแต่ละอนุภาคลูกปา ใช้ทศนิยมเพื่อทำให้ลูกปามีขนาดเล็กลง ไปต่อลองลูกปาเล็ก ๆ พวกเขาน่ารัก!
• zIndex Integer (ค่าเริ่มต้น: 100) : ลูกปาควรอยู่ด้านบนหลังจากทั้งหมด แต่ถ้าคุณมีหน้าสูงบ้าคุณสามารถตั้งค่าได้สูงขึ้น
• disableForReducedMotion บูลีน (ค่าเริ่มต้น: เท็จ) : ปิดการใช้งานลูกปาทั้งหมดสำหรับผู้ใช้ที่ต้องการการเคลื่อนไหวที่ลดลง คำสัญญาของ confetti() จะแก้ไขได้ทันทีในกรณีนี้

confetti.shapeFromPath({ path, matrix? }) → Shape

วิธีผู้ช่วยนี้ช่วยให้คุณสร้างรูปร่างลูกปาที่กำหนดเองโดยใช้สตริงพา ธ SVG เส้นทางที่ถูกต้องใด ๆ ควรใช้งานได้แม้ว่าจะมีข้อแม้สองสามข้อ:

• เส้นทางทั้งหมดจะถูกยื่น หากคุณหวังว่าจะมีเส้นทางโรคหลอดเลือดสมองนั่นไม่ได้ถูกนำไปใช้
• เส้นทางถูก จำกัด ด้วยสีเดียวดังนั้นโปรดจำไว้
• เส้นทางทั้งหมดต้องการเมทริกซ์การแปลงที่ถูกต้อง คุณสามารถส่งผ่านหนึ่งในหรือคุณสามารถทิ้งมันไว้และใช้ตัวช่วยนี้เพื่อคำนวณเมทริกซ์สำหรับคุณ โปรดทราบว่าการคำนวณเมทริกซ์ค่อนข้างแพงดังนั้นจึงเป็นการดีที่สุดที่จะคำนวณหนึ่งครั้งสำหรับแต่ละเส้นทางในการพัฒนาและแคชค่านั้นเพื่อให้ลูกปาการผลิตยังคงรวดเร็ว เมทริกซ์มีการกำหนดและจะเหมือนกันเสมอเนื่องจากค่าพา ธ เดียวกัน
• เพื่อความเข้ากันได้ที่ดีที่สุดจะเป็นการดีที่สุดที่จะสร้างเมทริกซ์ใหม่อีกครั้งหากคุณอัปเดตไลบรารี canvas-confetti อีกครั้ง
• การสนับสนุนสำหรับลูกปาตามเส้นทางนั้น จำกัด เฉพาะเบราว์เซอร์ที่สนับสนุน Path2D ซึ่งควรเป็นเบราว์เซอร์หลักทั้งหมดในตอนนี้

วิธีนี้จะคืน Shape - มันเป็นเพียงวัตถุธรรมดาที่มีคุณสมบัติบางอย่าง แต่ Shhh ... เราจะแกล้งทำเป็นว่ามันเป็นรูปร่าง ส่งผ่านวัตถุ Shape นี้เข้าไปในอาร์เรย์ shapes โดยตรง

ตัวอย่างนี่คือวิธีที่คุณจะทำสามเหลี่ยมลูกปา:

 var triangle = confetti . shapeFromPath ( { path : 'M0 10 L5 0 L10 10z' } ) ;

confetti ( {
  shapes : [ triangle ]
} ) ;

confetti.shapeFromText({ text, scalar?, color?, fontFamily? }) → Shape

นี่คือคุณสมบัติที่คาดการณ์ไว้อย่างสูงในการแสดง Emoji Confetti! ใช้อิโมจิ Unicode มาตรฐานใด ๆ หรือข้อความอื่น ๆ แต่ ... อาจจะไม่ใช้ข้อความอื่น

ในขณะที่ข้อความใด ๆ ควรใช้งานมีข้อแม้บางอย่าง:

• สำหรับลูกปา flailing สิ่งที่ส่วนใหญ่เป็นสแควร์ทำงานได้ดีที่สุด นั่นคือตัวละครตัวเดียวโดยเฉพาะอิโมจิ
• แทนที่จะแสดงข้อความทุกครั้งที่มีการวาดลูกปาผู้ช่วยนี้จะทำให้ข้อความจริง ๆ ดังนั้นจึงไม่ได้ปรับขนาดได้ดีหลังจากสร้างขึ้น หากคุณวางแผนที่จะใช้ค่า scalar เพื่อปรับขนาดลูกปาให้ใช้ค่า scalar เดียวกันที่นี่เมื่อสร้างรูปร่าง สิ่งนี้จะทำให้แน่ใจว่าลูกปาไม่พร่ามัว

ตัวเลือกสำหรับวิธีนี้คือ:

• ตัว options Object :
  • String text : ข้อความที่จะแสดงเป็นลูกปา ถ้าคุณไม่สามารถตัดสินใจได้ฉันแนะนำ "?"
  • Number, optional, default: 1 scalar , ตัวเลือก, ค่าเริ่มต้น: 1: ค่าสเกลเทียบกับขนาดเริ่มต้น มันตรงกับค่า scalar ในตัวเลือกลูกปา
  • String, optional, default: #000000 color , เสริม, ค่าเริ่มต้น: #000000: สีที่ใช้ในการแสดงข้อความ
  • String, optional, default: native emoji fontFamily , ตัวเลือก, ค่าเริ่มต้น: อิโมจิดั้งเดิม: ชื่อตระกูลตัวอักษรที่จะใช้เมื่อแสดงข้อความ ค่าเริ่มต้นเป็นไปตามแนวทางปฏิบัติที่ดีที่สุดสำหรับการแสดงเอโมจิ OS ดั้งเดิมของอุปกรณ์โดยถอยกลับไปที่ sans-serif หากใช้ตัวอักษรเว็บตรวจสอบให้แน่ใจว่าตัวอักษรนี้ถูกโหลดก่อนที่จะแสดงผลลูกปาของคุณ

 var scalar = 2 ;
var pineapple = confetti . shapeFromText ( { text : '?' , scalar } ) ;

confetti ( {
  shapes : [ pineapple ] ,
  scalar
} ) ;

confetti.create(canvas, [globalOptions]) → function

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

ผืนผ้าใบอาจเข้าใจผิดได้นิดหน่อยดังนั้นให้ฉันอธิบายว่าทำไมคุณอาจต้องการให้โมดูลแก้ไขผืนผ้าใบเพียงเล็กน้อย โดยค่าเริ่ม canvas เป็นภาพที่ค่อนข้างเล็ก - ที่ไหนสักแห่งประมาณ 300x150 ขึ้นอยู่กับเบราว์เซอร์ เมื่อคุณปรับขนาดโดยใช้ CSS จะตั้งค่าขนาดการแสดงผลของผืนผ้าใบ แต่ไม่ใช่ภาพที่แสดงบนผืนผ้าใบนั้น คิดว่ามันเป็นการโหลดภาพ 300x150 JPEG ในแท็ก img จากนั้นตั้งค่า CSS สำหรับแท็กนั้นเป็น 1500x600 - ภาพของคุณจะจบลงและเบลอ ในกรณีของผืนผ้าใบคุณต้องตั้งค่าความกว้างและความสูงของภาพผืนผ้าใบด้วย หากคุณไม่ต้องการทำเช่นนั้นคุณสามารถอนุญาตให้ confetti ตั้งค่าให้คุณได้

โปรดทราบว่าคุณควรคงอยู่อินสแตนซ์ที่กำหนดเองและหลีกเลี่ยงการเริ่มต้นอินสแตนซ์ของลูกปาด้วยองค์ประกอบผ้าใบเดียวกันมากกว่าหนึ่งครั้ง

มีตัวเลือกทั่วโลกต่อไปนี้:

• resize บูลีน (ค่าเริ่มต้น: เท็จ) : ไม่ว่าจะอนุญาตให้ตั้งค่าขนาดภาพผืนผ้าใบรวมทั้งให้ขนาดถูกต้องหากหน้าต่างเปลี่ยนขนาด (เช่นการปรับขนาดหน้าต่างหมุนอุปกรณ์มือถือ ฯลฯ ) โดยค่าเริ่มต้นขนาดผ้าใบจะไม่ถูกแก้ไข
• useWorker BOOLEAN (ค่าเริ่มต้น: FALSE) : ไม่ว่าจะใช้งานเว็บแบบอะซิงโครนัสเพื่อแสดงภาพเคลื่อนไหวของลูกปาเมื่อใดก็ตามที่เป็นไปได้ สิ่งนี้ถูกปิดโดยค่าเริ่มต้นซึ่งหมายความว่าภาพเคลื่อนไหวจะดำเนินการในเธรดหลักเสมอ หากเปิดใช้งานและเบราว์เซอร์รองรับภาพเคลื่อนไหวจะดำเนินการออกจากเธรดหลักเพื่อไม่ให้ปิดกั้นงานอื่น ๆ หน้าของคุณต้องทำ การใช้ตัวเลือกนี้จะปรับเปลี่ยนผืนผ้าใบ แต่เพิ่มเติมเกี่ยวกับด้านล่าง - อ่าน หากเบราว์เซอร์ไม่รองรับค่านี้จะถูกละเว้น
• disableForReducedMotion บูลีน (ค่าเริ่มต้น: เท็จ) : ปิดการใช้งานลูกปาทั้งหมดสำหรับผู้ใช้ที่ต้องการการเคลื่อนไหวที่ลดลง เมื่อตั้งค่าเป็นจริงการใช้อินสแตนซ์ลูกปานี้มักจะเคารพคำขอของผู้ใช้สำหรับการเคลื่อนไหวที่ลดลงและปิดการใช้งานลูกปาสำหรับพวกเขา

สำคัญ: ถ้าคุณใช้ useWorker: true ฉันเป็นเจ้าของผืนผ้าใบของคุณตอนนี้ ตอนนี้เป็นของฉันและฉันสามารถทำอะไรก็ได้ที่ฉันต้องการ (ไม่ต้องกังวล ... ฉันจะใส่ลูกปาไว้ในนั้นฉันสัญญา) คุณต้องไม่ลองใช้ผืนผ้าใบ แต่อย่างใด (นอกเหนือจากฉันเดาว่าจะลบออกจาก DOM) เพราะมันจะทำให้เกิดข้อผิดพลาด เมื่อใช้คนงานเพื่อการเรนเดอร์การควบคุมผืนผ้าใบจะต้องถูกถ่ายโอนไปยังผู้ปฏิบัติงานเว็บเพื่อป้องกันการใช้งานของผืนผ้าใบนั้นบนเธรดหลัก หากคุณต้องจัดการกับผืนผ้าใบในทางใดทางหนึ่งอย่าใช้ตัวเลือกนี้

 var myCanvas = document . createElement ( 'canvas' ) ;
document . body . appendChild ( myCanvas ) ;

var myConfetti = confetti . create ( myCanvas , {
  resize : true ,
  useWorker : true
} ) ;
myConfetti ( {
  particleCount : 100 ,
  spread : 160
  // any other options from the global
  // confetti function
} ) ;

confetti.reset()

หยุดภาพเคลื่อนไหวและล้างลูกปาทั้งหมดรวมทั้งแก้ไขสัญญาที่โดดเด่นใด ๆ ทันที ในกรณีของอินสแตนซ์ลูกปาแยกต่างหากที่สร้างขึ้นด้วย confetti.create อินสแตนซ์นั้นจะมีวิธี reset ของตัวเอง

 confetti ( ) ;

setTimeout ( ( ) => {
  confetti . reset ( ) ;
} , 100 ) ; 

 var myCanvas = document . createElement ( 'canvas' ) ;
document . body . appendChild ( myCanvas ) ;

var myConfetti = confetti . create ( myCanvas , { resize : true } ) ;

myConfetti ( ) ;

setTimeout ( ( ) => {
  myConfetti . reset ( ) ;
} , 100 ) ; 

ตัวอย่าง

เปิดตัวลูกปาด้วยวิธีเริ่มต้น:

 confetti ( ) ;

เปิดตัวลูกปา:

 confetti ( {
  particleCount : 150
} ) ;

เปิดตัวลูกปากว้างจริงๆ:

 confetti ( {
  spread : 180
} ) ;

สร้างสรรค์ เปิดตัวลูกปาเล็ก ๆ จากส่วนสุ่มของหน้า:

 confetti ( {
  particleCount : 100 ,
  startVelocity : 30 ,
  spread : 360 ,
  origin : {
    x : Math . random ( ) ,
    // since they fall down, start a bit higher than random
    y : Math . random ( ) - 0.2
  }
} ) ;

ฉันบอกว่าสร้างสรรค์ ... เราทำได้ดีกว่านี้ เนื่องจากไม่สำคัญว่าเราจะเรียก confetti กี่ครั้ง (เพียงจำนวนลูกปาทั้งหมดในอากาศ) เราจึงสามารถทำสิ่งสนุก ๆ ได้เช่นเปิดตัวลูกปาอย่างต่อเนื่องเป็นเวลา 30 วินาทีจากหลายทิศทาง:

 // do this for 30 seconds
var duration = 30 * 1000 ;
var end = Date . now ( ) + duration ;

( function frame ( ) {
  // launch a few confetti from the left edge
  confetti ( {
    particleCount : 7 ,
    angle : 60 ,
    spread : 55 ,
    origin : { x : 0 }
  } ) ;
  // and launch a few from the right edge
  confetti ( {
    particleCount : 7 ,
    angle : 120 ,
    spread : 55 ,
    origin : { x : 1 }
  } ) ;

  // keep going until we are out of time
  if ( Date . now ( ) < end ) {
    requestAnimationFrame ( frame ) ;
  }
} ( ) ) ;