分類
<style> html { overflow: hidden; user-select: none; background-color: black; } html body { margin: 0; } </style>
<script src="js/jquery.min.js"></script>
<div></div> <script> let doc = $(document), mX = doc.width()/2, mY = doc.height()/2+120/1.3 let fire = [], bound = [doc.width()/2, doc.height()/2, 90, 120] mR = (n, i) => Math.floor(Math.random() * n) + i inject = () => { $("body").append("<canvas></canvas>") can = document.querySelector("canvas") con = can.getContext("2d") init() } size = () => { can.height = doc.height() can.width = doc.width() } $(window).on("resize", () => { size() }) init = () => { size() think() } doc.on("mousemove", (e) => { mX = e.pageX mY = e.pageY }) genFire = () => { for (let i = fire.length; i < doc.width()/6; i++) { fire.push([mR(bound[2]/3, bound[0]+bound[2]/3), mR(bound[3], bound[1]), -Math.random(10)/100 + 1, Math.random(), mR(5, 1)]) } } think = () => { bound[0] = mX-bound[2]/2 bound[1] = mY-bound[3]/1.2 for (let i = 0; i < fire.length; i++) { fire[i][0] > bound[0]+bound[2]/2 && fire[i][1] > bound[1]+bound[3]/3 ? fire[i][0]+= 0.3: fire[i][0]-= 0.4 fire[i][0] < bound[0]+bound[2]/2 && fire[i][1] > bound[1]+bound[3]/3 ? fire[i][0]-= 0.3: fire[i][0]+= 0.4 fire[i][3]-= 0.01 fire[i][1]*= fire[i][2] fire[i][1] <= 0 || fire[i][3] <= 0 ? fire.splice(i, 1): null } genFire() animate() requestAnimationFrame(think) } animate = () => { con.clearRect(0, 0, can.width, can.height) for (let i = 0; i < fire.length; i++) { dC(fire[i][0], fire[i][1], fire[i][4], fire[i][3]) } } dC = (x, y, s, c) => { let rC = ["rgba(255, 0, 0, "+c+")", "rgba(255, 69, 0, "+c+")", "rgba(255, 140, 0, "+c+")"] con.beginPath() con.save() con.shadowColor = rC[mR(rC.length, 0)] con.shadowBlur = s/2 con.fillStyle = rC[mR(rC.length, 0)] con.arc(x, y, s, 0, Math.PI*2, true) con.fill() con.restore() } doc.ready(() => { inject() })</script>
1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請(qǐng)勿用于商業(yè)用途,會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途,織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。