js实现canvas粒子小球重力下落弹跳动画效果代码
代码语言:html
所属分类:粒子
代码描述:采用js实现一个canvas鼠标点击生成粒子小球下落连续弹跳动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> #canvas { background: linear-gradient( to right, #6f0000, #200122 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: 10; } </style> </head> <body> <canvas id="canvas"></canvas> <script > const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); canvas.height = window.innerHeight; canvas.width = window.innerWidth; const numOfpartlces = 300; let particles = []; const mouse = { x: null, y: null, }; window.addEventListener('mousemove', (event) => { mouse.x = event.x; mouse.y = event.y; }); setInterval(() => { mouse.x = undefined; mouse.y = undefined; }, 200); class Particle { constructor(x, y, size, weight) { this.x = x; this.y = y; this.s.........完整代码请登录后点击上方下载按钮下载查看
网友评论0